canvas画线

参考地址 https://segmentfault.com/q/1010000018554255

自写案例

画线移入线条路径内高亮显示

html

1	`<canvas class="canvasbox" id="canvas"></canvas>`

const canvas = document.getElementById('canvas')
     const ctx = canvas.getContext('2d')
     canvas.style.width = 1455 + 'px';
     canvas.style.height = 300 + 'px';
     canvas.width = 1455;
     canvas.height = 300;

模糊问题把长宽高写到上面不要写css 里

// ctx.beginPath()						//开始画线
     // ctx.strokeStyle = 'green'   //颜色
     // ctx.lineWidth = 1				//宽度
     // ctx.moveTo(168, 0)			//起点坐标
     // ctx.lineTo(615, 100)			//终点坐标
	//ctx.setLineDash(1,1);        //虚线  步长  （线段长  ，  间距
     // ctx.stroke()						//结束

     // ctx.beginPath()
     // ctx.strokeStyle = 'green'
     // ctx.lineWidth = 1
     // ctx.moveTo(168, 0)
     // ctx.lineTo(840, 100)
     // ctx.stroke()

     // ctx.beginPath()
     // ctx.strokeStyle = 'green'
     // ctx.lineWidth = 1
     // ctx.moveTo(168, 0)
     // ctx.lineTo(1065, 100)
     // ctx.stroke()

坐标获取可用

<canvas class="canvasbox" id="canvas" @mousemove="mousemoveFN"></canvas>
 mousemoveFN(event) {
      // console.log('event', event);
      // console.log('x', event.offsetX)
      // console.log('y', event.offsetY)
    },

选中高亮核心属性

ctx.isPointInStroke（x,y）
// 测试后发现这个方法不适合，这个适用于图形范围
// if (ctx.isPointInPath(event.offsetX, event.offsetY)) {
// console.log(‘在区域上。。。。。。。。。。。’);
// }
// 测试后发现这个方法可以（主要用于边缘线
if (ctx.isPointInStroke(event.offsetX, event.offsetY)) {
console.log(‘在綫上。。。。。。。。。。。’);
ctx.stroke();
};
isPointInStroke 只能监听到最后一次画线的路径所以要循环渲染

canvas 添加监听属性

canvas.addEventListener('mousemove', (event) => {
        this.clickFN()

        console.log(event.offsetX, event.offsetY);

        for (var k in this.lineData) {
          this.lineData[k].forEach((row, index) => {


            
            this.drawWire(ctx, row)
            if (ctx.isPointInStroke(event.offsetX, event.offsetY)) {
              console.log('在綫上。。。。。。。。。。。', `k:${k}`, `index:${index}`);
              ctx.stroke();
              console.log(1111111111111,this.lineData[k][index]);
              this.lineData[k][index].color = 'red'
              this.lineData[k][index].lineWidth = 3
              this.lineData[k][index].setLineDash = [1, 0],
              this.drawWire(ctx, row)
            }else{
              this.lineData[k][index].color = 'green'
              this.lineData[k][index].lineWidth = 1
              this.lineData[k][index].setLineDash = [4, 2],
              this.drawWire(ctx, row)
            }
          });
        }

        // 测试后发现这个方法不适合，这个适用于图形范围
        // if (ctx.isPointInPath(event.offsetX, event.offsetY)) {
        //   console.log('在区域上。。。。。。。。。。。');
        // }
        // 测试后发现这个方法可以（主要用于边缘线
        if (ctx.isPointInStroke(event.offsetX, event.offsetY)) {
          console.log('在綫上。。。。。。。。。。。');
          ctx.stroke();
        };

      })

vanvas 重画重叠问题   清除canvas 画布
ctx.save();
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.restore();

 //根据传进来的坐标点数组画出一条线
    drawWire(ctx, row) {
      ctx.beginPath()
      ctx.strokeStyle = row.color
      ctx.lineWidth = row.lineWidth
      ctx.setLineDash(row.setLineDash);
      console.log(row.moveTo.join(','));
      ctx.moveTo(Number(row.moveTo[0]), Number(row.moveTo[1]))
      ctx.lineTo(Number(row.lineTo[0]), Number(row.lineTo[1]))
      ctx.stroke()
    },

测试数据

lineData: {
        CPU0: [
          {
            color: 'green',
            lineWidth: 1,
            moveTo: [168, 0],
            lineTo: [390, 100],
            setLineDash: [4, 2],
            isMouseOver: false,
          },
          {
            color: 'green',
            lineWidth: 1,
            moveTo: [168, 0],
            lineTo: [615, 100],
            setLineDash: [4, 2],
            isMouseOver: false,
          },
          {
            color: 'green',
            lineWidth: 1,
            moveTo: [168, 0],
            lineTo: [840, 100],
            setLineDash: [4, 2],
            isMouseOver: false,
          },
          {
            color: 'green',
            lineWidth: 1,
            moveTo: [168, 0],
            lineTo: [1065, 100],
            setLineDash: [4, 2],
            isMouseOver: false,
          },
        ],
      },