Canvas绘制辅助线

我是小阵不悲催
377 阅读3分钟

我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

前言

大家好，我是小阵 🔥，一路奔波不停的码字业务员
如果喜欢我的文章，可以关注 ➕ 点赞，与我一同成长吧~😋
加我微信：zzz886885，邀你进群，一起学习交流，摸鱼学习两不误🌟

开开心心学技术大法~~

开心

来了来了，他真的来了~

正文

先看效果

iShot_2022-09-22_23.13.09

实现思路

  • 基础html就不用说了，最上面有一个canvas的mousemove的x坐标和y坐标

  • 下面是一个canvas，先看静态的canvas

  • canvas的上半部是个图片，可以通过context.drawImage(Image,0,0)来填充一个图片

    • 这里的Image是一个<image src='xxx'/>的一个标签
    • 后面的0,0是canvas的x坐标和y坐标

  • 然后是canvas下半部的背景

  • 循环生成划线即可

    • 线可通过moveTo和lineTo来确定起点和终点
    • 通过context.strokeStyle确定线的颜色
    • 通过context.stroke()来画下线

  • 然后就是canvas的mousemove事件

    • 正常情况下我们只需跟鼠标的x与y坐标然后再减去canvas的左边距与上边距即可得到在canvas上的x坐标与y坐标

    • 但是canvas有点特殊，因为canvas本身有自己的widhth和height，这个宽高是canvas的实际宽高

    • 然后canvas还可以通过css来控制宽高，这里控制的宽高会根据css的宽高与canvas的宽高的比例进行拉伸

      • 比如正常情况是这样

        image-20220922230015318

      • 宽度不变高度翻倍之后是这样

        image-20220922230122527

    • 因此，在计算鼠标在canvas的xy坐标的时候需要根据实际canvas的宽高与css的宽高做个比例换算，换算成在canvas上的实际坐标

  • 然后每次mousemove的时候清空画布，再画上图片与背景，之后再画上横竖两条辅助线

  • 辅助线的绘制跟上面一样

  • 然后每次把每次触发mousemove的xy坐标塞入到页面最上方的dom中

  • 其他的就没什么了

具体代码

html基础代码

<body>
    <div id="readout"></div>
    <p>加载一个图片，移动鼠标，获取基于canvas鼠标处精灵表坐标</p>
    <canvas id="canvas" width="500" height="250">Canvas not supported</canvas>
</body>

css就不说了，没有关键的点

canvas代码

绘制图片到画布上

function drawSpritesheet() {
  console.log('spritesheet',spritesheet);
  //将图片画到画布上
  context.drawImage(spritesheet, 0, 0);
}

绘制背景

function drawBackground() {
  var VERTICAL_LINE_SOACING = 12,
      i = context.canvas.height;
​
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.strokeStyle = 'lightgray';
  context.lineWidth = 0.5;
​
  //预留出顶部4个网格线高的长度供图片占位,从地部划线，从下往上
  while (i > VERTICAL_LINE_SOACING * 4) {
    context.beginPath();
    context.moveTo(0, i);
    context.lineTo(canvas.width, i);
    context.stroke();
​
    i -= VERTICAL_LINE_SOACING;
​
  }
}

计算canvas的xy坐标

function windowToCanvas(canvas, x, y) {
  //获取canvas元素的边界框(bouding box)
  var bbox = canvas.getBoundingClientRect();
  return {
    x: (x - bbox.left) * (canvas.width / bbox.width),
    y:( y - bbox.top) * (canvas.height / bbox.height)
  }
}

画辅助线

function drawGuidelines(x, y) {
  context.strokeStyle = 'rgba(0,0,230,0.8)';
  context.lineWidth = 0.5;
  drawVerticalLine(x);
  drawHorizontalLine(y);
}

完整代码

总结

  • 主要是canvas的mousemove事件和canvas的xy坐标

结语

如果文章真的有帮到你，希望可以多多点赞、收藏、关注支持一波呀！！小阵会很开心哒~

热爱开源，支持开源，拥抱开源！

文章如有错误或不严谨之处，还望指出，感谢感谢！！！

加油！

往期好文推荐

avatar
文章
阅读
粉丝