feat(views): 支持绘制“有监测点房间”控件

src/views/EnvArea/View.vue

@@ -3,6 +3,7 @@ import { onMounted, onUnmounted, reactive } from "vue";
 import { Meta2d, Options } from "@meta2d/core";
 import ContextMenu from "../components/ContextMenu.vue";
 import SvgIcon from "../components/SvgIcon.vue";
+import { registerAreaPens } from "./pens/register";
 
 const meta2dOptions: Options = {
   x: 0,
@@ -11,10 +12,12 @@ const meta2dOptions: Options = {
   height: 660,
   background: "#F5F7FA",
   shadowBlur: 0,
+  disableAnchor: true,
 };
 
 onMounted(() => {
   new Meta2d("env-area-meta2d", meta2dOptions);
+  registerAreaPens()
 });
 
 onUnmounted(() => {

src/views/EnvArea/pens/monitorRoom.ts

@@ -0,0 +1,37 @@
+import { Pen } from "@meta2d/core";
+
+export function monitorRoom(pen: Pen, ctx?: CanvasRenderingContext2D): Path2D {
+  const path = !ctx ? new Path2D() : ctx;
+  let wr = pen.calculative.borderRadius || 0,
+    hr = wr;
+  const { x, y, width, height, ex, ey } = pen.calculative.worldRect;
+  if (wr < 1) {
+    wr = width * wr;
+    hr = height * hr;
+  }
+  let r = wr < hr ? wr : hr;
+  if (width < 2 * r) {
+    r = width / 2;
+  }
+  if (height < 2 * r) {
+    r = height / 2;
+  }
+  path.moveTo(x + r, y);
+  path.arcTo(ex, y, ex, ey, r);
+  path.arcTo(ex, ey, x, ey, r);
+  path.arcTo(x, ey, x, y, r);
+  path.arcTo(x, y, ex, y, r);
+  path.closePath();
+  if (path instanceof Path2D) {
+    return path;
+  }
+}
+
+export const monitorRoomData = {
+  name: "monitorRoom",
+  width: 214,
+  height: 140,
+  lineWidth: 0,
+  borderRadius: 12,
+  background: "rgba(255, 255, 255, 1)",
+};

src/views/EnvArea/pens/register.ts

@@ -0,0 +1,6 @@
+import { register } from "@meta2d/core";
+import { monitorRoom } from "./monitorRoom";
+
+export function registerAreaPens() {
+  register({ monitorRoom });
+}