低代码必备！带标尺和缩略图的画板

080

最近重构某项目的仪表板，代码屎山一样没眼看！果断弃之！从零开始！自己搞更香！

1.功能需求

  1. 左侧和顶部有刻度标尺，跟着画板滚动而变化
  2. 缩略图，可以通过移动视图框来控制画板滚动
  3. 画板可放缩，对应标尺和缩略图比例跟着变
  4. 移动画板位置，对应标尺和缩略图位置跟着变
  5. 适应屏幕大小和实际大小

image.png

2. 用canvas画刻度标尺

2.1 横向刻度标尺

const canvas=document.getElementById('myCanvas')
const padding=2;//边距
const startLen=60;//开始间隔
const width=500,height=24;//长宽
 const ctx  = canvas.getContext('2d');
  const unit = 10; //间隔刻度单位
  
  //计算出要绘制多少个刻度
  const scaleCount = Math.ceil(width + startLen / unit);
  
  /***--执行绘制---***/   


    canvas.width = width + startLen;
    canvas.height = height;
    ctx.clearRect(0, 0, width, height);
    ctx.beginPath();
    //绘制起点
    ctx.strokeStyle = 'rgb(0, 0, 0)';
    ctx.font = '10px Arial';
    ctx.lineWidth = 1;
    ctx.moveTo(startLen, 0);
    ctx.lineTo(startLen, height);
    ctx.fillText('0', startLen + padding, 13);

    for (let i = 1; i <= scaleCount; i++) {
    //计算每个刻度的位置
      const step = startLen + Math.round(i * unit);
      //10的倍数刻度大长度
      if (i % 10 === 0) {
        ctx.moveTo(step, 0);
        ctx.lineTo(step, height);
        //标注刻度值
        const scaleText = i * unit + '';
        ctx.fillText(scaleText, step + padding, 13);
      } else if (i % 5 === 0) {//5的倍数刻度中长度
        ctx.moveTo(step, 15);
        ctx.lineTo(step, height);
        //标注刻度值
        const scaleText = i * unit + '';
        ctx.fillText(scaleText, step + padding, 13);
      } else {//其他刻度小长度
        ctx.moveTo(step, height - 3);
        ctx.lineTo(step, height);
      }
    }
    ctx.stroke();

image.png

2.2 纵向刻度标尺

横向和纵向的计算公式相似，但坐标计算有所不同

 canvas.width = height;
    canvas.height = width + startLen;
    ctx.clearRect(0, 0, height, width + startLen);

    ctx.beginPath();
    //绘制起点
    ctx.strokeStyle = 'rgb(0, 0, 0)';
    ctx.font = '10px Arial';
    ctx.lineWidth =1;
    ctx.moveTo(0, startLen);
    ctx.lineTo(height, startLen);
    ctx.fillText('0', padding, startLen - padding);
   

    for (let i = 1; i <= scaleCount; i++) {
     //计算每个刻度的位置
      const step = startLen + Math.round(i * unit );
        //10的倍数刻度大长度
      if (i % 10 === 0) {
        ctx.moveTo(0, step);
        ctx.lineTo(height, step);
        //标注刻度值
        const scaleText = unit * i + '';
        ctx.fillText(scaleText, padding, step - padding);
      } else if (i % 5 === 0) {//5的倍数刻度中长度
        ctx.moveTo(15, step);
        ctx.lineTo(height, step);
        //标注刻度值
        const scaleText = unit * i + '';
        ctx.fillText(scaleText, padding, step - padding);
      } else {//其他刻度小长度
        ctx.moveTo(height - 3, step);
        ctx.lineTo(height, step);
      }
    }
    ctx.stroke();

image.png

3. 缩略图

缩略图主要由屏幕大小缩略图和可视范围缩略图组成，可视范围缩略图要对应画布移动

const canvas = document.getElementById('myCanvas');

      const ctx = canvas.getContext('2d');
      const startLen = 6;
        //屏幕大小
      const screenWidth = 1920;
      const screenHeight = 1080;
      const thumbnailSize = 0.1; //10:1的缩放比例
      //缩略图大小
      const canvasConfig = {
        thumbnailWidth: Math.ceil(screenWidth * thumbnailSize),
        thumbnailHeight: Math.ceil(screenHeight * thumbnailSize),
        thumbnailWrapWidth: Math.ceil((screenWidth + 400) * thumbnailSize),
        thumbnailWrapHeight: Math.ceil((screenHeight + 400) * thumbnailSize)
      };
      //可视范围框
      const viewBox = {
        viewWidth: Math.ceil(1000 * thumbnailSize),
        viewHeight: Math.ceil(800 * thumbnailSize)
      };
      //滚动坐标
      const scroll = {
        scrollLeft: Math.ceil(300 * thumbnailSize),
        scrollTop: Math.ceil(200 * thumbnailSize)
      };
      //计算出要绘制多少个刻度
      canvas.width = canvasConfig.thumbnailWrapWidth;
      canvas.height = canvasConfig.thumbnailWrapHeight;
 
      //画缩略框
      ctx.clearRect(0, 0, canvasConfig.thumbnailWrapWidth, canvasConfig.thumbnailWrapHeight);
      ctx.beginPath();
      ctx.fillStyle = 'rgba(26, 103, 255, 0.5)';
      ctx.rect(startLen, startLen, canvasConfig.thumbnailWidth, canvasConfig.thumbnailHeight);
      ctx.fill();
      //画可视范围框
      ctx.beginPath();
      ctx.strokeStyle = '#1a67ff';
      ctx.rect(
        Math.round(scroll.scrollLeft),
        Math.round(scroll.scrollTop),
        viewBox.viewWidth,
        viewBox.viewHeight
      );
      ctx.stroke();

image.png

4. 画板

画板样式

  .canvas-panel-wrap {
    position: absolute;
    box-shadow: var(--canvas-shadow) 0 0 30px 0;
    transform-origin: left top;
    margin-left: 60px;
    margin-top: 60px;
  }

画板大小

//操作空间大小，预留400px作为移动
 showWidth() {
      return this.screenWidth * (this.scale < 100 ? 1 : this.percent) + 400;
    },
    showHeight() {
      return this.screenHeight * (this.scale < 100 ? 1 : this.percent) + 400;
    },


   canvasStyle: computed(() => ({
          left: -scrollLeft.value + 'px',
          top: -scrollTop.value + 'px',
          width: editorStore.screenWidth + 'px',
          height: editorStore.screenHeight + 'px',
          transform: `scale(${editorStore.scale * 0.01})`
        })),

5.画板缩放，标尺和缩略图同步

scale 缩放比例范围[20-200]

5.1 标尺跟随缩放

单位刻度长度，标尺刻度都需添加缩放值，重新计算，这样才能让标尺像素保持不变的情况下，刻度值对应上画板的大小

注意不可以用transform：scale来缩放标尺，会导致像素模糊问题

 const percent = scale * 0.01;
 //单位刻度长度
  let unit = Math.ceil(10 / percent);
  if (unit < 8) {
    unit = 8;
  }
  //计算出要绘制多少个刻度
  const scaleCount = Math.ceil(width + startLen / unit);
   //…… 
   
   //计算每个刻度的位置
        const step = startLen + Math.round(i * unit * percent);
  //……

20230712_230840 00_00_00-00_00_30.gif

200%的标尺

image.png

70%的标尺

image.png

20%的标尺

image.png

可以看到开始的间隔0刻度开始的地方是不变的，这就是像素不变，但刻度对应

5.2 缩略图跟随缩放

缩略图不可固定比例，当缩放值大于100时会导致整张缩略图跟着变大，占据操作空间，而当缩放值小于100时则会导致整张缩略图跟着变小，不好操作，因此需要处理一下；让缩略图保持大小。

//缩略图比例
 thumbnailSize() {
      if (this.scale > 100) {
        return 10 / this.scale;
      } else {
        return 0.1;
      }

    },
    
//缩略图大小
canvasConfig() {
      return {
        thumbnailWidth: Math.ceil(this.screenWidth * this.thumbnailSize * this.percent),
        thumbnailHeight: Math.ceil(this.screenHeight * this.thumbnailSize * this.percent),
        thumbnailWrapWidth: Math.ceil(this.showWidth * this.thumbnailSize),
        thumbnailWrapHeight: Math.ceil(this.showHeight * this.thumbnailSize)
      };
    }

20230712_224328.gif

6. 移动画板

6.1 标尺跟随移动

按空格键切换显隐画布操作蒙版，通过移动蒙版来实现移动画布，通过滚轮来缩放画布

const onKeyAction = (e: KeyboardEvent) => {
//按空格键切换显隐操作操作蒙版
        if (e.keyCode == keyCode.space) {
          editorStore.setMoveCanvas(!editorStore.isMoveCanvas);
        }
      };
      //滚轮缩放画布
      const onWheelAction = (e: WheelEvent) => {
        if (isMoveCanvas.value) {
          if (e.wheelDelta > 0) {
            editorStore.setScale(editorStore.scale + 1);
          } else {
            editorStore.setScale(editorStore.scale - 1);
          }
        }

      };
      //注册监听动作
      onMounted(() => {
        window.addEventListener('keydown', onKeyAction);
        window.addEventListener('wheel', onWheelAction);
        refreshRuler();
      });
      //取消监听动作
      onBeforeUnmount(() => {
        window.removeEventListener('keydown', onKeyAction);
        window.removeEventListener('wheel', onWheelAction);
      });

移动蒙版

//移动画布信息
      let moveInfo = {
        startX: 0,
        startY: 0
      };

//记录开始位置
 onMoveCanvasDown: (e: MouseEvent) => {
          e.stopPropagation();

          moveInfo = {
            startX: e.clientX,
            startY: e.clientY
          };
        },
        //结束鼠标操作后移动画布
        onMoveCanvasUp: (e: MouseEvent) => {
          e.stopPropagation();
          //计算移动坐标
          let left = scrollLeft.value - (e.clientX - moveInfo.startX);
          let top = scrollTop.value - (e.clientY - moveInfo.startY);
          //   console.log('move', left, top);
          editorStore.setScroll({ left, top });
        }

移动范围有效性校验,以免移动出界

    setScroll({ left, top }: { left: number; top: number }) {
      const distance = 60;
      if (left < 0) {
        left = 0;
      } else if (left > this.showWidth - this.viewWidth - distance) {
        left = this.showWidth - this.viewWidth - distance;
      }

      if (top < 0) {
        top = 0;
      } else if (top > this.showHeight - this.viewHeight - distance) {
        top = this.showHeight - this.viewHeight - distance;
      }

      this.$state.scrollLeft = Math.round(left);
      this.$state.scrollTop = Math.round(top);
    },

20230712_233348.gif

6.2 缩略图跟随移动

缩略图可视范围框是当前仪表板给的内容空间，移动这个可视范围框根据对应反比例，可映射到整个画布的移动

另外，需要监听画布大小和移动更新缩略图和可视范围位置，监听window的resize动作，更新可视范围

//可视范围
      let dashboardDom = document.getElementById('dashboard');
          if (!dashboardDom) {
            return;
          }
          viewBox.value.viewWidth = dashboardDom.offsetWidth;
          viewBox.value.viewHeight = dashboardDom.offsetHeight;


//缩略图反比例，对应上缩略图比例的计算
 const unscale = computed(() => {
        if (editorStore.scale > 100) {
          return 1 / editorStore.thumbnailSize;
        } else {
          return 10;
        }

      });

移动缩略图中可视范围

 let moveInfo = {
        startX: 0,
        startY: 0,
        isMove: false
      };

      //记录开始位置
         onMoveStart: (e: MouseEvent) => {
          moveInfo.isMove = true;
          moveInfo.startX = e.clientX;
          moveInfo.startY = e.clientY;
        },
        
        onMove: (e: MouseEvent) => {
          if (moveInfo.isMove) {
          //计算反比例移动坐标
            let left = editorStore.scrollLeft + (e.clientX - moveInfo.startX) * unscale.value;
            let top = editorStore.scrollTop + (e.clientY - moveInfo.startY) * unscale.value;            
            editorStore.setScroll({ left, top });
            moveInfo.startX = e.clientX;
            moveInfo.startY = e.clientY;
          }
        },
        //结束移动
        onMoveEnd: () => {
          moveInfo.isMove = false;
        }

20230712_234237 00_00_00-00_00_30.gif

7. 大小适配可视范围

自适应比例 = (可视范围高度-边距和标尺高度/屏幕高度)*100%

 const onFitCanvas = () => {
        store.setScale(
          parseInt(       
   ((document.getElementById('dashboard').offsetHeight - 84) / store.screenHeight) * 100
          )
        );
      };

20230713_001026 00_00_00-00_00_30.gif

总结

其实，标尺和缩略图操作协同的画板并不难，主要是缩放比例计算和视图转换的问题！啦啦啦！现在你已经学会了！可以拥有一个常用的低代码画板了！

src/assets/vars.scss这里抽离了一些颜色值，方便大家配置自己想要的样式，canvas绘制的颜色值还是得手动赋上去.

:root{
  //标尺背景颜色
  --ruler-bg: #f4f7fe;
  //移动蒙版背景颜色
  --move-bg: rgba(0, 0, 0, 0.1);
  //画布阴影
  --canvas-shadow: rgba(0, 0, 0, 0.5);
//右下小操作栏
  --slider-icon: #32363c;
  --slider-bg: #ffffff;
  --canvas-slider-border: rgba(0, 0, 0, 0.1);


  --thumbnail-wrap-bg: #f4f7fe;
  }

20230713_002321 00_00_00-00_00_30.gif

GitHub地址

https://github.com/xiaolidan00/ruler-canvas

© 版权声明
文章版权归作者所有，未经允许请勿转载，侵权请联系 admin@trc20.tw 删除。
THE END

# 前端# JavaScript# Canvas
喜欢就支持一下吧
点赞0

Warning: mysqli_query(): (HY000/3): Error writing file '/tmp/MYR9AbqY' (Errcode: 28 - No space left on device) in /www/wwwroot/583.cn/wp-includes/class-wpdb.php on line 2345
admin的头像-五八三
相关推荐
Dhtmlx甘特图简单实现-五八三
Dhtmlx甘特图简单实现
Dhtmlx甘特图简单实现
2年前 3622
AI太强了！使用langchain自动生成代码-五八三
AI太强了！使用langchain自动生成代码
AI太强了！使用langchain自动生成代码
2年前 466
Playwright使用教程-五八三
Playwright使用教程
Playwright使用教程
2年前 464
? 配置及使用 Strapi CMS 的一些总结-五八三
? 配置及使用 Strapi CMS 的一些总结
? 配置及使用 Strapi CMS 的一些总结
2年前 419
揭秘足球串子投注：多串多，一场赢了全赢？如何计算浮动奖金？-五八三
揭秘足球串子投注：多串多，一场赢了全赢？如何计算浮动奖金？
揭秘足球串子投注：多串多，一场赢了全赢？如何计算浮动奖金？
2年前 402
OpenTelemetry与Jaeger集成指南-五八三
OpenTelemetry与Jaeger集成指南
OpenTelemetry与Jaeger集成指南
2年前 380
评论 抢沙发
头像
欢迎您留下宝贵的见解！
提交
头像

昵称

图形验证码
取消
昵称

请填写用户信息：

  • 昵称(必填)
  • 邮箱(必填)
代码

请输入代码：

确认
图片
热门推荐