Condivisione della tecnologia

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Meta2d.js ha ascoltato gli eventi di trascinamento, supporta la ricezione di dati JSON primitivi validi e crea un oggetto primitivo sull'area di disegno.

Trascina e rilascia la libreria grafica

1. Creare una barra degli strumenti della libreria grafica

Crea un elemento html della barra degli strumenti della libreria grafica e associa l'evento di trascinamento o l'evento di tocco

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

copia

2. Trasferisci i dati

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

copia

Trascina e rilascia le immagini del desktop

Metodo 1: uploadUrl

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

Configurazione del back-end:

1. Il nome dell'attributo del file formData accettato deve essere file
2. Nella risposta restituita dal backend, l'attributo di primo livello deve contenere url come indirizzo di anteprima dell'immagine.

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

copia

Metodo 2: uploadFn

Configura meta2d.store.options.uploadFn. Questo metodo è una funzione di callback e il parametro è un file, ovvero un file immagine Dopo il caricamento sul backend, è necessario restituire l'URL accessibile dell'immagine.

uploadFn converte le immagini in base64 per impostazione predefinita, il che fa sì che il file json scaricato sia di grandi dimensioni e non possa essere riutilizzato dopo aver copiato l'immagine.Si consiglia di passare l'immagine al backend e utilizzare l'URL per accedere all'immagine

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

copia

Open source domestico

LeWule si dedica alla ricerca e allo sviluppo, è indipendente e controllabile e continua a iterare e ottimizzare.

Pagina inizialeGitHub - le5le-com/meta2d.js: meta2d.js è uno scambio di dati in tempo reale e un motore 2D Web interattivo. Gli sviluppatori sono in grado di creare Web SCADA, IoT, gemelli digitali e così via. Meta2d.js è in tempo reale scambio di dati e motore 2D interattivo, che può essere utilizzato nella configurazione Web, nell'Internet delle cose, nei gemelli digitali e in altri scenari.

Alloggio: meta2d.js: meta2d.js è uno scambio di dati in tempo reale e un motore web 2D interattivo. Gli sviluppatori sono in grado di creare Web SCADA, IoT, gemelli digitali e così via. Può essere utilizzato nella configurazione Web, Internet delle cose, gemelli digitali e altri scenari.

Benvenuto a Star, Fork e al supporto del blog