【国産オープンソース可視化エンジン Meta2d.js】ドラッグ＆ドロップ

2024-07-12

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

フロントエンド構成:meta2d.store.options.uploadUrl。

バックエンド構成:

受け入れられる formData ファイルの属性名は file でなければなりません
バックエンドによって返される応答では、第 1 レベルの属性に画像プレビューアドレスとして url が含まれている必要があります。


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

コピー

方法 2:uploadFn

meta2d.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：GitHub - le5le-com/meta2d.js: meta2d.js はリアルタイムデータ交換であり、開発者は Web SCADA、IoT、デジタルツインなどを構築できます。データ交換およびインタラクティブ 2D エンジン。Web 構成、モノのインターネット、デジタルツインなどのシナリオで使用できます。

ギティー: meta2d.js:meta2d.js は、リアルタイムデータ交換およびインタラクティブな Web 2D エンジンであり、開発者は Web SCADA、IoT、デジタルツインなどを構築できます。 Web 構成、モノのインターネット、デジタルツインなどのシナリオで使用できます。

スター、フォーク、ブログのサポートへようこそ

技術共有