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

乐吾乐科技

于 2024-07-05 14:21:11 发布

阅读量733

点赞数 8

分类专栏： 2D可视化组态编辑器文章标签：编辑器数据可视化前端流程图信息可视化低代码

本文链接：https://blog.csdn.net/le5le_iot/article/details/140207679

版权

2D可视化组态编辑器专栏收录该内容

93 篇文章 7 订阅

订阅专栏

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