[Inländische Open-Source-Visualisierungs-Engine Meta2d.js] Drag & Drop

2024-07-12

Meta2d.js hat Drag-Ereignisse abgehört, unterstützt den Empfang gültiger primitiver JSON-Daten und erstellt ein primitives Objekt auf der Leinwand.

Drag-and-Drop der Grafikbibliothek

1. Erstellen Sie eine Symbolleiste für die Grafikbibliothek

Erstellen Sie ein HTML-Element für die Symbolleiste der Grafikbibliothek und binden Sie ein Drag- oder Touch-Ereignis


<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>

Kopieren

2. Daten übertragen


// 示例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]);
};

Kopieren

Desktop-Bilder per Drag-and-Drop verschieben

Methode 1: uploadUrl

Front-End-Konfiguration: meta2d.store.options.uploadUrl.

Backend-Konfiguration:

Der Attributname der akzeptierten formData-Datei muss file sein
In der vom Backend zurückgegebenen Antwort muss das Attribut der ersten Ebene eine URL als Bildvorschauadresse enthalten.


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

Kopieren

Methode 2: uploadFn

Konfigurieren Sie meta2d.store.options.uploadFn. Diese Methode ist eine Rückruffunktion und der Parameter ist eine Datei, also eine Bilddatei. Nach dem Hochladen in das Backend muss die zugängliche URL des Bildes zurückgegeben werden.

uploadFn konvertiert Bilder standardmäßig in Base64, was dazu führt, dass die heruntergeladene JSON-Datei groß wird und nach dem Kopieren des Bildes nicht wiederverwendet werden kann.Es wird empfohlen, das Bild an das Backend zu übergeben und über die URL auf das Bild zuzugreifen


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;
  },
});

Kopieren