D3JS 绘图工具

目录

一、技术栈

二、功能

实例化

画布缩放与平移（默认：鼠标左键为平移，滚动轮滑为缩放）

点击按钮生成原点，并实现属性的动态修改

拖拽功能

画布缩放与平移（修改d3默认事件(进阶)：按住轮滑为平移，滚动轮滑为缩放）

画笔效果

折线画笔效果

三、基础逻辑

---

该文章作为该绘图工具提纲，后续会陆续补充

工具目前效果图为：

一、技术栈

vue3 + element plus + js + pinia + d3(^7.9.0)

二、功能

1. 实例化

2. 画布缩放与平移（默认：鼠标左键为平移，滚动轮滑为缩放）

3. 点击按钮生成原点，并实现属性的动态修改

4. 拖拽功能

5. 画布缩放与平移（修改d3默认事件(进阶)：按住轮滑为平移，滚动轮滑为缩放）

6. 画笔效果

7. 折线画笔效果

8. ……

三、基础逻辑

1. 将工具拆解成三个组件：左侧（工具栏）、中间（画布）及右侧（属性栏）， 代码设计如下：

           home.vue

   <template>
       <div class="main-container">
           <el-row :gutter="0" class="full-height">
               <el-col :span="4" class="full-height">
                   <Tools @addCircle="addCircle" />
               </el-col>
               <el-col :span="16" class="full-height">
                   <D3Canvas ref="svg" :data="data" />
               </el-col>
               <el-col :span="4" class="full-height">
                   <Attributes :visiable="isVisiable" />
               </el-col>
           </el-row>
       </div>
   </template>
   
   <script setup>
   import Tools from "@/views/D3/tools/index.vue";
   import D3Canvas from "@/views/D3/canvas/D3Canvas.vue";
   import Attributes from "@/views/D3/attributes/index.vue";
   
   const svg = ref(null);
   
   const isVisiable = ref({
       circleVisiable: false,
   });
   
   const addCircle = () => {
       svg.value.drawCircle();
   };
   </script>

   其中该页面中的 isVisiable 为控制对应表单的显示与隐藏。

2. 通过点击左侧按钮触发画布绘制图元的方法；
3. 双击图元，属性栏可加载出该图元所对应的属性；
4. 单击选中图元，可对其进行拖拽。