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。

后端配置：

1. 接受的 formData 文件的属性名必须为 file
2. 后端返回的响应中，一级属性必须包含 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、博文支持