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
        Canvas.Left="50"
        Canvas.Top="120"
        Width="100"
        Height="100"
        Background="Yellow" />
</Canvas>

你可以在 Canvas 中定义控件的 Canvas.Left 和 Canvas.Top 实现内部控件位置的设置。

二、Canvas 在 html css 中的实现方式

我们实现了类似的效果：

具体的代码如下：

<template>
  <div class="canvas-container">
    <div class="canvas-item border"></div>
  </div>
</template>

<style lang="css" scoped>
  .canvas-container {
    position: relative;
    width: 400px;
    height: 233px;
    background: aqua;
  }

  .canvas-item {
    position: absolute;
  }

  .border {
    width: 100px;
    height: 100px;

    left: 50px;
    top: 120px;

    background: yellow;
  }
</style>

你可以注意到其中的一些点：容器其实没有 display，而内部成员采用的是 position: absolute;，left和top是对应于Canvas.Left和Canvas.Top的。

三、总结

WPF 和 Avalonia	html + css	备注
Canvas	主要是 position: relative;	这个点没有那么重要
画布成员	.canvas-item {position: absolute;}	只有使用了绝对坐标，才能 left 和 top 才能生效
Canvas.Left	left	别忘了单位
Canvas.Top	top	别忘了单位