[Kotimainen avoimen lähdekoodin visualisointikone Meta2d.js] Vedä ja pudota

2024-07-12

Meta2d.js on kuunnellut vedä tapahtumia, tukee kelvollisen primitiivisen Json-tietojen vastaanottamista ja luo primitiivisen objektin kankaalle.

Grafiikkakirjasto vedä ja pudota

1. Luo grafiikkakirjaston työkalupalkki

Luo grafiikkakirjaston työkalupalkin html-elementti ja sitoa vedä- tai kosketustapahtuma


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

Kopio

2. Siirrä tiedot


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

Kopio

Vedä ja pudota työpöydän kuvia

Tapa 1: uploadUrl

Käyttöliittymän määritykset: meta2d.store.options.uploadUrl.

Taustakokoonpano:

Hyväksytyn formData-tiedoston määritteen nimen on oltava tiedosto
Taustaohjelman palauttamassa vastauksessa ensimmäisen tason attribuutin on sisällettävä url kuvan esikatseluosoitteena.


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

Kopio

Tapa 2: uploadFn

Määritä meta2d.store.options.uploadFn. Tämä menetelmä on takaisinsoittotoiminto, ja parametri on tiedosto eli kuvatiedosto Taustasovellukseen latauksen jälkeen kuvan käytettävissä oleva URL-osoite on palautettava.

uploadFn muuntaa kuvat oletusarvoisesti base64-muotoon, minkä vuoksi ladattava json-tiedosto on kooltaan suuri eikä sitä voi käyttää uudelleen kuvan kopioimisen jälkeen.On suositeltavaa välittää kuva taustajärjestelmään ja käyttää kuvaan url-osoitetta


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

Kopio

Kotimainen avoin lähdekoodi

LeWule omistautuu tutkimukseen ja kehitykseen, on itsenäinen ja hallittavissa ja jatkaa iterointia ja optimointia.

Github:GitHub - le5le-com/meta2d.js: Meta2d.js on reaaliaikainen tiedonvaihto ja interaktiivinen web 2D -moottori tiedonvaihto ja interaktiivinen 2D-moottori, jota voidaan käyttää web-konfiguroinnissa, esineiden Internetissä, digitaalisissa kaksosissa ja muissa skenaarioissa.

Gitee: meta2d.js: Meta2d.js on reaaliaikainen tiedonvaihto ja interaktiivinen web 2D -moottori Sitä voidaan käyttää verkkokokoonpanossa, esineiden Internetissä, digitaalisissa kaksosissa ja muissa tilanteissa.

Tervetuloa Star-, Fork- ja blogitukeen

Teknologian jakaminen