Κοινή χρήση τεχνολογίας

한어Русский язык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: uploadUrl

Διαμόρφωση διεπαφής: meta2d.store.options.uploadUrl.

Διαμόρφωση backend:

1. Το όνομα χαρακτηριστικού του αποδεκτού αρχείου formData πρέπει να είναι αρχείο
2. Στην απάντηση που επιστρέφεται από το backend, το χαρακτηριστικό πρώτου επιπέδου πρέπει να περιέχει url ως διεύθυνση προεπισκόπησης εικόνας.

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

αντίγραφο

Μέθοδος 2: uploadFn

Διαμόρφωση meta2d.store.options.uploadFn. Αυτή η μέθοδος είναι μια συνάρτηση επανάκλησης και η παράμετρος είναι ένα αρχείο, δηλαδή ένα αρχείο εικόνας Μετά τη μεταφόρτωση στο backend, η προσβάσιμη διεύθυνση URL της εικόνας πρέπει να επιστραφεί.

Το uploadFn μετατρέπει τις εικόνες σε base64 από προεπιλογή, γεγονός που προκαλεί το ληφθέν αρχείο json να είναι μεγάλο σε μέγεθος και να μην μπορεί να χρησιμοποιηθεί ξανά μετά την αντιγραφή της εικόνας.Συνιστάται να περάσετε την εικόνα στο backend και να χρησιμοποιήσετε τη διεύθυνση 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, Digital twins και ούτω καθεξής ανταλλαγή δεδομένων και διαδραστική μηχανή 2D, η οποία μπορεί να χρησιμοποιηθεί σε διαμόρφωση Web, Internet of Things, digital twins και άλλα σενάρια.

Gitee: meta2d.js: Το meta2d.js είναι μια μηχανή ανταλλαγής δεδομένων σε πραγματικό χρόνο και διαδραστική μηχανή web 2D Οι προγραμματιστές μπορούν να δημιουργήσουν Web SCADA, IoT, Digital twins και ούτω καθεξής και άλλα σενάρια.

Καλώς ορίσατε Υποστήριξη Star, Fork και blog