[Domestic open source visualization engine Meta2d.js] Drag and drop

2024-07-12

Meta2d.js has listened to the drag event, supports receiving a valid element Json data, and creates an element object on the canvas.

Graphics library drag

1. Create a graphics library toolbar

Create a graphical library toolbar html element and bind drag events or touch events


<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. Passing Data


// 示例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

Drag desktop picture

Method 1: uploadUrl

Front-end configuration: meta2d.store.options.uploadUrl.

Backend configuration:

The attribute name of the accepted formData file must be file
In the response returned by the backend, the first-level attribute must contain the url as the image preview address


new Meta2d("meta2d", {
  uploadUrl: "/api/image",
  uploadHeaders: {
    token: "xxx"
  },
  uploadParams: {
    // 参数
    public: true,
  },
});

Copy

Method 2: uploadFn

Configure meta2d.store.options.uploadFn. This method is a callback function, and its parameter is a file, that is, an image file. After uploading to the backend, it needs to return the accessible URL of the image.

By default, uploadFn converts the image into base64, which will cause the downloaded json file to be large and the copied image cannot be reused. It is recommended to pass the image to the backend and use the URL to access the image.


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