canvas绘制与Vue的双向绑定
在图像绘制相关的模块,开发最容易犯的问题是在vue的监听数据中绑定了canvas绘制实例或者上级,导致渲染出现问题.
vue2.0封装自定义组件库,发布到NPM
参考Vue-Cli官网,使用Verdaccio搭建私服
// 在package.json中配置
"name": "spacetime-mapservice",
"version": "0.0.6",
"description": "时空大数据平台地图服务客户端",
"main": "dist/spacetime-mapservice.umd.js",
"scripts": {
"package": "vue-cli-service build --target lib --name spacetime-mapservice ./src/components/index.js",
"unpublish": "npm unpublish spacetime-mapservice@0.0.6 --registry http://10.0.0.60:4873/",
"publish": "npm publish --registry http://10.0.0.60:4873/",
...
}
Vue3.0获取DOM元素
<script setup lang="ts">
import { onMounted, ref } from 'vue';
// 绑定dom canvas对象
const gpucanvas = ref(null);
onMounted(()=>{
const canvas = gpucanvas.value;
if(!canvas){
throw new Error("无法获取画布!");
}
WebGPUUtils.run(canvas);
})
</script>
<template>
<canvas ref="gpucanvas"></canvas>
</template>