Partage de technologie

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

Meta2d.js a écouté les événements de glisser, prend en charge la réception de données Json primitives valides et crée un objet primitif sur le canevas.

Glisser-déposer de la bibliothèque graphique

1. Créez une barre d'outils de bibliothèque graphique

Créer un élément HTML de la barre d'outils de la bibliothèque graphique et lier un événement de glisser ou un événement tactile

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

Copie

2. Transférer des données

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

Copie

Glissez et déposez des images du bureau

Méthode 1 : uploadUrl

Configuration frontale : meta2d.store.options.uploadUrl.

Configuration du back-end :

1. Le nom d'attribut du fichier formData accepté doit être file
2. Dans la réponse renvoyée par le backend, l'attribut de premier niveau doit contenir l'url comme adresse d'aperçu de l'image.

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

Copie

Méthode 2 : uploadFn

Configurez meta2d.store.options.uploadFn. Cette méthode est une fonction de rappel et le paramètre est un fichier, c'est-à-dire un fichier image. Après le téléchargement sur le backend, l'URL accessible de l'image doit être renvoyée.

uploadFn convertit les images en base64 par défaut, ce qui entraîne une grande taille du fichier json téléchargé et ne peut pas être réutilisé après la copie de l'image.Il est recommandé de transmettre l'image au backend et d'utiliser l'url pour accéder à l'image

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

Copie

Open source national

LeWule se consacre à la recherche et au développement, est indépendant et contrôlable, et continue d'itérer et d'optimiser.

Github :GitHub - le5le-com/meta2d.js : Meta2d.js est un moteur d'échange de données en temps réel et interactif 2D. Les développeurs peuvent créer du Web SCADA, de l'IoT, des jumeaux numériques, etc. Meta2d.js est un moteur en temps réel. échange de données et moteur 2D interactif, qui peut être utilisé dans la configuration Web, l'Internet des objets, les jumeaux numériques et d'autres scénarios.

Gîte : meta2d.js : Meta2d.js est un moteur d'échange de données en temps réel et un moteur Web 2D interactif. Les développeurs peuvent créer du Web SCADA, de l'IoT, des jumeaux numériques, etc. Il peut être utilisé dans la configuration Web, l'Internet des objets, les jumeaux numériques. et d'autres scénarios.

Bienvenue au support Star, Fork et blog