Compartilhamento de tecnologia

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

Meta2d.js ouviu eventos de arrastar, suporta o recebimento de dados Json primitivos válidos e cria um objeto primitivo na tela.

Arrastar e soltar da biblioteca gráfica

1. Crie uma barra de ferramentas da biblioteca gráfica

Criar elemento html da barra de ferramentas da biblioteca gráfica e vincular evento de arrastar ou evento de toque

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

cópia de

2. Transferir dados

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

cópia de

Arraste e solte imagens da área de trabalho

Método 1: uploadUrl

Configuração de front-end: meta2d.store.options.uploadUrl.

Configuração de back-end:

1. O nome do atributo do arquivo formData aceito deve ser file
2. Na resposta retornada pelo backend, o atributo de primeiro nível deve conter url como endereço de visualização da imagem.

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

cópia de

Método 2: uploadFn

Configure meta2d.store.options.uploadFn. Este método é uma função de retorno de chamada e o parâmetro é um arquivo, ou seja, um arquivo de imagem. Após o upload para o backend, o URL acessível da imagem precisa ser retornado.

uploadFn converte imagens em base64 por padrão, o que faz com que o arquivo json baixado seja grande e não possa ser reutilizado após a cópia da imagem.Recomenda-se passar a imagem para o backend e usar a url para acessar a imagem

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

cópia de

Código aberto doméstico

LeWule se dedica à pesquisa e desenvolvimento, é independente e controlável e continua a iterar e otimizar.

Github：GitHub - le5le-com/meta2d.js: O meta2d.js é uma troca de dados em tempo real e um mecanismo 2D interativo da web. Os desenvolvedores são capazes de construir Web SCADA, IoT, gêmeos digitais e assim por diante. troca de dados e mecanismo 2D interativo, que pode ser usado em configuração Web, Internet das Coisas, gêmeos digitais e outros cenários.

Turismo rural: meta2d.js: O meta2d.js é uma troca de dados em tempo real e um mecanismo 2D interativo da web. Os desenvolvedores são capazes de construir Web SCADA, IoT, gêmeos digitais e assim por diante. e outros cenários.

Bem-vindo Star, Fork e suporte do blog