【国产开源可视化引擎Meta2d.js】拖拽

Meta2d.js已监听拖拽事件，支持接收一个有效的图元Json数据，在画布创建一个图元对象。

图形库拖拽

1. 创建图形库工具栏

创建图形库工具栏 html 元素，绑定拖拽事件或 touch 事件

复制代码

<div v-for="item in list" draggable="true"
    ondragstart="onDragstart($event, item.data)"
    onclick="onTouchstart($event, item.data)"
    ontouchstart="onTouchstart($event, item.data)">
	<img :src="item.svg" />
</div>

Copy

2. 传递数据

复制代码

// 示例pen
const pen = {
  name: "rectangle",
  text: "矩形",
  width: 100,
  height: 100,
};

// 拖拽添加图元
onDragstart = (e, pen) => {
  e.dataTransfer.setData("Text", JSON.stringify(pen));
};

// 支持单击添加图元
import { deepClone } from "@meta2d/core";
onTouchstart = (e, pen) => {
  meta2d.canvas.addCaches = deepClone([pen]);
};

Copy

拖拽桌面图片

方法1：uploadUrl

前端配置：meta2d.store.options.uploadUrl。

后端配置：

接受的 formData 文件的属性名必须为 file
后端返回的响应中，一级属性必须包含 url 作为图片预览地址

new Meta2d("meta2d", {
uploadUrl: "/api/image",
uploadHeaders: {
token: "xxx"
},
uploadParams: {
// 参数
public: true,
},
});

Copy

方法2：uploadFn

配置meta2d.store.options.uploadFn。该方法是一个回调函数，参数是一个 file，即图片文件，上传后端后，需要返回该图片的可访问 url。

uploadFn默认将图片转换成 base64 的，会导致下载 json 文件体积大，复制图片无法复用。推荐将图片传递后端，使用 url 访问图片

复制代码

new Meta2d("meta2d", {
  uploadFn: async (file: File) => {
    // 伪代码，复制后根据实际情况使用
    const formData = new FormData();
    formData.append("file", file);
    const res = await axios.post(url, file);
    return res.url;
  },
});

Copy

国产开源

乐吾乐潜心研发，自主可控，持续迭代优化

Github：GitHub - le5le-com/meta2d.js: The meta2d.js is real-time data exchange and interactive web 2D engine. Developers are able to build Web SCADA, IoT, Digital twins and so on. Meta2d.js是一个实时数据响应和交互的2d引擎，可用于Web组态，物联网，数字孪生等场景。

Gitee: meta2d.js: The meta2d.js is real-time data exchange and interactive web 2D engine. Developers are able to build Web SCADA, IoT, Digital twins and so on. Meta2d.js是一个实时数据响应和交互的2d引擎，可用于Web组态，物联网，数字孪生等场景。

欢迎Star、Fork、博文支持