问题描述
我在画布上有几行.我希望每条线在鼠标悬停在那条线上时都会更改颜色,但是我对此问题有些疑问.
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/
这篇关于鼠标悬停时更改画布中的颜色线的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!