鼠标悬停时更改画布中的颜色线 [英] Change color lines in canvas when mouseover

问题描述

我在画布上有几行.我希望每条线在鼠标悬停在那条线上时都会更改颜色，但是我对此问题有些疑问.

I have some lines in canvas. I want each single line change color when the mouseover that line but I have some issues with this problem.

有没有JS库可以帮助我解决此问题?

Is there any JS library to help me solve this problem?

你能帮我吗? 谢谢

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

var width = 400;
var height = 400;

for(i=0; i<120 ;i+=15){
  context.beginPath();
  context.moveTo(90+i, 0);
  context.lineTo(250, 400);
  context.lineWidth = 1;
  context.strokeStyle = '#28B9A2';
  context.stroke();
}

for(i=0; i<120 ;i+=15){
  context.beginPath();
  context.moveTo(300+i, 0);
  context.lineTo(250, 400);
  context.lineWidth = 1;
  context.strokeStyle = '#28B9A2';
  context.stroke();
}

//blue
for(i=0; i<100 ;i+=15){
  context.beginPath();
  context.moveTo(200+i, 0);
  context.lineTo(250, 400);
  context.lineWidth = 1;
  context.strokeStyle = '#AECD49';
  context.stroke();
}

function detectLine(x, y) {
   console.log(x, y);
   var imageData = context.getImageData(0, 0, width, height),
    inputData = imageData.data,
    pData = (~~x + (~~y * width)) * 4;
   if (inputData[pData + 3]) {
     return true;
     context.strokeStyle = '#28B9A2';
   }

 return false;
}

canvas.addEventListener("mousemove", function(e){
    var x  = e.pageX,
        y = e.pageY;
    detectLine(x, y);
});

推荐答案

首先，您需要将所有行的路径存储在数组中.

First you need to store the paths of all the lines in an array.

var xTopFromLine = [];

for(i=0; i<120 ;i+=15){
  var xTop = 90+i;
  context.beginPath();
  context.moveTo(xTop , 0);
  context.lineTo(250, 400);
  context.lineWidth = 1;
  context.strokeStyle = '#28B9A2';
  context.stroke();

  xTopFromLine.push([xTop]);
}

for(i=0; i<120 ;i+=15){
  var xTop = 300+i;
  context.beginPath();
  context.moveTo(xTop , 0);
  context.lineTo(250, 400);
  context.lineWidth = 1;
  context.strokeStyle = '#28B9A2';
  context.stroke();

  xTopFromLine.push([xTop]);
}

//blue
for(i=0; i<100 ;i+=15){
  var xTop = 200+i;
  context.beginPath();
  context.moveTo(xTop , 0);
  context.lineTo(250, 400);
  context.lineWidth = 1;
  context.strokeStyle = '#AECD49';
  context.stroke();

  xTopFromLine.push([xTop]);
}

之后，您可以在每条彩色线条的确切位置上创建一条空线，如下所示:

After that you can create an empty line in the exact position of each of your colored lines, like this:

//emptyLine
function emptyLine( xTop){
  context.beginPath();
  context.moveTo(xTop, 0);
  context.lineTo(250, 400);
  context.lineWidth = 1;
}
//single colored Line
function drawSingleLine( xTop, color){
  context.beginPath();
  context.moveTo(xTop, 0);
  context.lineTo(250, 400);
  context.lineWidth = 1;
  context.strokeStyle = color;
  context.stroke();
}

然后检查您的鼠标是否在刚创建的幽灵线"上.

And check if your mouse is over the "ghost line" you have just created.

canvas.addEventListener("mousemove", function(e){

  for(i=0; i<xTopFromLine.length; i++){
    var x  = e.pageX,
        y = e.pageY;

     emptyLine(xTopFromLine[i]);
     if (context.isPointInStroke(x, y)) {
        drawSingleLine(xTopFromLine[i], 'blue');
     }

  }

});

您可以检查我创建的jsFiddle(我做了一些重构): https://jsfiddle.net/laia89/6wtLper3/

You can check the jsFiddle I created (I did some refactorizations): https://jsfiddle.net/laia89/6wtLper3/

这篇关于鼠标悬停时更改画布中的颜色线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！