[국내 오픈소스 시각화 엔진 Meta2d.js] Drag and drop

[국내 오픈소스 시각화 엔진 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: uploadUrl

프런트엔드 구성: Meta2d.store.options.uploadUrl.

백엔드 구성:

허용되는 formData 파일의 속성 이름은 file이어야 합니다.
백엔드에서 반환된 응답에서 첫 번째 수준 속성에는 이미지 미리보기 주소로 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는 실시간 데이터 교환 및 대화형 웹 2D 엔진입니다. 개발자는 Web SCADA, IoT, Digital Twins 등을 실시간으로 구축할 수 있습니다. 웹 구성, 사물 인터넷, 디지털 트윈 및 기타 시나리오에서 사용할 수 있는 데이터 교환 및 대화형 2D 엔진입니다.

기티: Meta2d.js: Meta2d.js는 실시간 데이터 교환 및 대화형 웹 2D 엔진입니다. 개발자는 웹 SCADA, IoT, 디지털 트윈 등을 구축할 수 있습니다. Meta2d.js는 실시간 데이터 교환 및 대화형 2D 엔진입니다. .웹 구성, 사물 인터넷, 디지털 트윈 및 기타 시나리오에서 사용할 수 있습니다.

Welcome Star, Fork 및 블로그 지원

기술나눔