[Mesin visualisasi sumber terbuka domestik Meta2d.js] Seret dan lepas

2024-07-12

Meta2d.js telah mendengarkan peristiwa drag, mendukung penerimaan data Json primitif yang valid, dan membuat objek primitif di kanvas.

Seret dan lepas perpustakaan grafis

1. Buat toolbar perpustakaan grafis

Buat elemen html bilah alat perpustakaan grafis dan ikat acara seret atau acara sentuh


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

Menyalin

2. Mentransfer 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]);
};

Menyalin

Seret dan lepas gambar desktop

Metode 1: unggahUrl

Konfigurasi front-end: meta2d.store.options.uploadUrl.

Konfigurasi ujung belakang:

Nama atribut file formData yang diterima harus berupa file
Dalam respons yang dikembalikan oleh backend, atribut tingkat pertama harus berisi url sebagai alamat pratinjau gambar.


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

Menyalin

Metode 2: unggahFn

Konfigurasikan meta2d.store.options.uploadFn. Metode ini adalah fungsi panggilan balik, dan parameternya adalah file, yaitu file gambar. Setelah diunggah ke backend, URL gambar yang dapat diakses perlu dikembalikan.

uploadFn mengonversi gambar ke base64 secara default, yang menyebabkan file json yang diunduh berukuran besar dan tidak dapat digunakan kembali setelah menyalin gambar.Disarankan untuk meneruskan gambar ke backend dan menggunakan url untuk mengakses gambar


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

Menyalin

Sumber terbuka domestik

LeWule mengabdikan dirinya pada penelitian dan pengembangan, independen dan terkendali, serta terus melakukan iterasi dan optimalisasi.

Github：GitHub - le5le-com/meta2d.js: Meta2d.js adalah pertukaran data real-time dan mesin 2D web interaktif. Pengembang dapat membangun Web SCADA, IoT, Digital twins, dan sebagainya pertukaran data dan mesin 2D interaktif, yang dapat digunakan dalam konfigurasi Web, Internet of Things, digital twins dan skenario lainnya.

Gitee: meta2d.js: Meta2d.js adalah pertukaran data real-time dan mesin 2D web interaktif. Pengembang dapat membangun Web SCADA, IoT, Digital twins, dan sebagainya . Ini dapat digunakan dalam konfigurasi Web, Internet of Things, digital twins, dan skenario lainnya.

Selamat datang Star, Fork, dan dukungan blog

Berbagi teknologi