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 布局来描述图形在指定坐标上的位置，就像下面的写法：

1. <Canvas
2.     Width="400"
3.     Height="233"
4.     Background="Aqua">
5.     <Border
6. <template>
7.   
8.    
9.   
10. </template>Canvas.Left="50"
11. <template>
12.   
13.    
14.   
15. </template>Canvas.Top="120"
16. <template>
17.   
18.    
19.   
20. </template>Width="100"
21. <template>
22.   
23.    
24.   
25. </template>Height="100"
26. <template>
27.   
28.    
29.   
30. </template>Background="Yellow" />
31. </Canvas>

复制代码

你可以在 Canvas 中定义控件的 Canvas.Left 和 Canvas.Top 实现内部控件位置的设置。
二、Canvas 在 html css 中的实现方式

我们实现了类似的效果：

具体的代码如下：

1. <Canvas
2.     Width="400"
3.     Height="233"
4.     Background="Aqua">
5.     <Border
6. <template>
7.   
8.    
9.   
10. </template>Canvas.Left="50"
11. <template>
12.   
13.    
14.   
15. </template>Canvas.Top="120"
16. <template>
17.   
18.    
19.   
20. </template>Width="100"
21. <template>
22.   
23.    
24.   
25. </template>Height="100"
26. <template>
27.   
28.    
29.   
30. </template>Background="Yellow" />
31. </Canvas><Canvas
32.     Width="400"
33.     Height="233"
34.     Background="Aqua">
35.     <Border
36. <template>
37.   
38.    
39.   
40. </template>Canvas.Left="50"
41. <template>
42.   
43.    
44.   
45. </template>Canvas.Top="120"
46. <template>
47.   
48.    
49.   
50. </template>Width="100"
51. <template>
52.   
53.    
54.   
55. </template>Height="100"
56. <template>
57.   
58.    
59.   
60. </template>Background="Yellow" />
61. </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别忘了单位
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！