深圳小企业网站建设,捷信做单网站,网站建设 销售,设计交易平台哪个好Meta2d.js已监听拖拽事件#xff0c;支持接收一个有效的图元Json数据#xff0c;在画布创建一个图元对象。
图形库拖拽
1. 创建图形库工具栏
创建图形库工具栏 html 元素#xff0c;绑定拖拽事件或 touch 事件
div v-foritem in list draggabletr…Meta2d.js已监听拖拽事件支持接收一个有效的图元Json数据在画布创建一个图元对象。
图形库拖拽
1. 创建图形库工具栏
创建图形库工具栏 html 元素绑定拖拽事件或 touch 事件
div v-foritem in list draggabletrueondragstartonDragstart($event, item.data)onclickonTouchstart($event, item.data)ontouchstartonTouchstart($event, item.data)img :srcitem.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
拖拽桌面图片
方法1uploadUrl
前端配置meta2d.store.options.uploadUrl。
后端配置
接受的 formData 文件的属性名必须为 file后端返回的响应中一级属性必须包含 url 作为图片预览地址
new Meta2d(meta2d, {uploadUrl: /api/image,uploadHeaders: {token: xxx},uploadParams: {// 参数public: true,},
});
Copy
方法2uploadFn
配置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 国产开源
乐吾乐潜心研发自主可控持续迭代优化
GithubGitHub - 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、博文支持
