Обмен технологиями

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

Meta2d.js прослушивает события перетаскивания, поддерживает получение допустимых примитивных данных Json и создает примитивный объект на холсте.

Перетаскивание графической библиотеки

1. Создайте панель инструментов графической библиотеки.

Создайте html-элемент панели инструментов графической библиотеки и привяжите событие перетаскивания или событие касания.

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

Копировать

2. Передача данных

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

Копировать

Перетащите изображения рабочего стола

Способ 1: URL-адрес загрузки

Конфигурация внешнего интерфейса: мета2d.store.options.uploadUrl.

Конфигурация бэкэнда:

1. Имя атрибута принятого файла formData должно быть file
2. В ответе, возвращаемом серверной частью, атрибут первого уровня должен содержать URL-адрес в качестве адреса предварительного просмотра изображения.

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

Копировать

Способ 2: загрузитьFn

Настройте мета2d.store.options.uploadFn. Этот метод представляет собой функцию обратного вызова, а параметр — файл, то есть файл изображения. После загрузки на бэкэнд необходимо вернуть доступный URL-адрес изображения.

uploadFn по умолчанию преобразует изображения в формат Base64, в результате чего загруженный файл JSON имеет большой размер и не может быть повторно использован после копирования изображения.Рекомендуется передать изображение на серверную часть и использовать URL-адрес для доступа к изображению.

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

Копировать

Внутренний открытый исходный код

LeWule посвящает себя исследованиям и разработкам, является независимым и контролируемым и продолжает совершенствовать и оптимизировать.

Гитхаб：GitHub — le5le-com/meta2d.js: Meta2d.js — это обмен данными в реальном времени и интерактивный веб-движок 2D. Разработчики могут создавать веб-SCADA, IoT, цифровые двойники и т. д. в режиме реального времени. обмен данными и интерактивный 2D-движок, который можно использовать в веб-конфигурации, Интернете вещей, цифровых двойниках и других сценариях.

Гите: Meta2d.js: Meta2d.js — это обмен данными в реальном времени и интерактивный веб-2D-движок. Разработчики могут создавать веб-SCADA, Интернет вещей, цифровые двойники и т. д. Его можно использовать в веб-конфигурации, Интернете вещей, цифровых двойниках. и другие сценарии.

Приветственная поддержка Star, Fork и блога