[घरेलुमुक्तस्रोतदृश्यीकरणइञ्जिन Meta2d.js] Drag and drop

[घरेलुमुक्तस्रोतदृश्यीकरणइञ्जिन Meta2d.js] खींच्य पातयन्तु

2024-07-12

Meta2d.js इत्यनेन drag इवेण्ट् श्रुतम्, वैधं आदिम Json दत्तांशं प्राप्तुं समर्थयति, तथा च कैनवास् इत्यत्र आदिमवस्तुं निर्माति ।

ग्राफिक्स् लाइब्रेरी drag and drop

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

प्रतिलिपि

डेस्कटॉप चित्राणि कर्षयन्तु, पातयन्तु च

विधिः १: uploadUrl

अग्र-अन्त-विन्यासः: meta2d.store.options.uploadUrl.

पृष्ठभागविन्यासः : १.

स्वीकृतस्य formData सञ्चिकायाः विशेषतानाम सञ्चिका भवितुमर्हति
पृष्ठभागेन प्रत्यागते प्रतिक्रियायां प्रथमस्तरीयविशेषतायां चित्रपूर्वावलोकनसङ्केतः url अवश्यं भवति ।


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

प्रतिलिपि

विधिः २: अपलोड्Fn

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

प्रतिलिपि