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
国产开源
乐吾乐潜心研发，自主可控，持续迭代优化
欢迎Star、Fork、博文支持