WPF 和 Avalonia 开发者的 html css 前端指南 Canvas 篇
WPF 和 Avalonia 开发者的 html css 前端指南 Canvas 篇笔者前端框架使用的是 Vue3 + Deno。
笔者主要会以 Avalonia 作为 C# 技术部分的示例。
本文主要是向大家列出 WPF 和 Avalonia 的 Canvas 在 html 和 css 的实现方法。
你其实也完全可以使用纯原生的 html+css，或者是 React、Blazor 等等框架来实现，因为本质是 html + css。
一、Canvas 在 WPF 和 Avalonia 中的实现方式
在 WPF 和 Avalonia 中，你可以使用 Canvas 布局来描述图形在指定坐标上的位置，就像下面的写法：
<Canvas
Width="400"
Height="233"
Background="Aqua">
<Border
<template>
</template>Canvas.Left="50"
<template>
</template>Canvas.Top="120"
<template>
</template>Width="100"
<template>
</template>Height="100"
<template>
</template>Background="Yellow" />
</Canvas>你可以在 Canvas 中定义控件的 Canvas.Left 和 Canvas.Top 实现内部控件位置的设置。
二、Canvas 在 html css 中的实现方式
我们实现了类似的效果：
具体的代码如下：
<Canvas
Width="400"
Height="233"
Background="Aqua">
<Border
<template>
</template>Canvas.Left="50"
<template>
</template>Canvas.Top="120"
<template>
</template>Width="100"
<template>
</template>Height="100"
<template>
</template>Background="Yellow" />
</Canvas><Canvas
Width="400"
Height="233"
Background="Aqua">
<Border
<template>
</template>Canvas.Left="50"
<template>
</template>Canvas.Top="120"
<template>
</template>Width="100"
<template>
</template>Height="100"
<template>
</template>Background="Yellow" />
</Canvas>你可以注意到其中的一些点：容器其实没有 display，而内部成员采用的是 position: absolute;，left和top是对应于Canvas.Left和Canvas.Top的。
三、总结
WPF 和 Avaloniahtml + css备注Canvas主要是 position: relative;这个点没有那么重要画布成员.canvas-item {position: absolute;}只有使用了绝对坐标，才能 left 和 top 才能生效Canvas.Leftleft别忘了单位Canvas.Toptop别忘了单位
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ 感谢分享 yyds。多谢分享 感谢分享，学习下。 谢谢楼主提供！ 很好很强大我过来先占个楼 待编辑 热心回复！ 谢谢楼主提供！ 分享、互助 让互联网精神温暖你我 过来提前占个楼 谢谢楼主提供！ 这个有用。 很好很强大我过来先占个楼 待编辑 这个有用。 热心回复！ 感谢分享，学习下。 喜欢鼓捣这些软件，现在用得少，谢谢分享！ 前排留名，哈哈哈 新版吗？好像是停更了吧。 谢谢分享，辛苦了
页:
[1]
2