[Motor de visualización de código abierto nacional Meta2d.js] Arrastrar y soltar

2024-07-12

Meta2d.js ha escuchado eventos de arrastre, admite la recepción de datos Json primitivos válidos y crea un objeto primitivo en el lienzo.

Arrastrar y soltar la biblioteca de gráficos

1. Cree una barra de herramientas de biblioteca de gráficos.

Cree un elemento html de la barra de herramientas de la biblioteca de gráficos y vincule un evento de arrastre o un evento táctil


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

Copiar

2. Transferir datos


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

Copiar

Arrastra y suelta imágenes del escritorio

Método 1: cargar URL

Configuración de front-end: meta2d.store.options.uploadUrl.

Configuración de fondo:

El nombre del atributo del archivo formData aceptado debe ser file
En la respuesta devuelta por el backend, el atributo de primer nivel debe contener la URL como dirección de vista previa de la imagen.


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

Copiar

Método 2: cargarFn

Configure meta2d.store.options.uploadFn. Este método es una función de devolución de llamada y el parámetro es un archivo, es decir, un archivo de imagen. Después de cargarlo en el backend, se debe devolver la URL accesible de la imagen.

uploadFn convierte imágenes a base64 de forma predeterminada, lo que hace que el archivo json descargado sea grande y no se pueda reutilizar después de copiar la imagen.Se recomienda pasar la imagen al backend y usar la URL para acceder a la imagen.


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

Copiar

Código abierto nacional

LeWule se dedica a la investigación y el desarrollo, es independiente y controlable, y continúa iterando y optimizando.

Github:GitHub - le5le-com/meta2d.js: meta2d.js es un motor web 2D interactivo y de intercambio de datos en tiempo real. Los desarrolladores pueden crear SCADA web, IoT, gemelos digitales, etc. Intercambio de datos y motor 2D interactivo, que se puede utilizar en configuración web, Internet de las cosas, gemelos digitales y otros escenarios.

Casa rural: meta2d.js: meta2d.js es un motor web 2D interactivo y de intercambio de datos en tiempo real. Los desarrolladores pueden crear SCADA web, IoT, gemelos digitales, etc. Se puede utilizar en configuración web, Internet de las cosas y gemelos digitales. y otros escenarios.

Bienvenido soporte de Star, Fork y blog

Compartir tecnología