【国产开源可视化引擎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。

后端配置:

  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、博文支持

相关推荐
carterwu2 分钟前
各个大厂是怎么实现组件库和相应扩展的?基础组件、区块、页面
前端
Face3 分钟前
promise 规范应用
前端
Mintopia3 分钟前
Node.js 中 fs.readFile API 的使用详解
前端·javascript·node.js
Face5 分钟前
事件循环
前端·javascript
ONE_Gua7 分钟前
chromium魔改——navigator.webdriver 检测
前端·后端·爬虫
CodePencil7 分钟前
CSS专题之盒模型
前端·css
谦谦橘子7 分钟前
服务端渲染原理解析
前端·javascript·react.js
carterwu8 分钟前
umi+模块联邦-配置指南
前端
Mintopia8 分钟前
深入理解 Three.js 中的 PerspectiveCamera
前端·javascript·three.js
无名之逆14 分钟前
Rust 开发提效神器:lombok-macros 宏库
服务器·开发语言·前端·数据库·后端·python·rust