gpt4 book ai didi

html - Canvas:在线点击事件

转载 作者:行者123 更新时间:2023-12-04 05:05:17 26 4
gpt4 key购买 nike

请看看这个小example .单击处理程序仅在您单击行中间时才起作用。看来方法isPointInPath不考虑线宽。有没有办法解决这个问题?

最佳答案

是的,你是对的。

新的 isPointInPath() 仅适用于“粗”线的中心线——而不是线的全宽。

它对宽度超过 1 像素的闭合形状更加用户友好;)

针对您的确切问题的解决方法:绘制一个 20 像素宽的矩形,而不是绘制粗线。

这是代码和 fiddle :http://jsfiddle.net/m1erickson/QyWDY/

这段代码使用基本的三角学来围绕一条线创建一个矩形。在 mousedown 事件处理程序中,它透明地重绘矩形,然后测试 isPointInPath()。

如果您需要测试折线,您可以使用这些相同的原则为折线的每一段制作矩形线。

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>

<script>
$(function(){

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
// get canvas's relative position
var canvasOffset=$("#canvas").offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;

// line specifications
var x1=50;
var y1=50;
var x2=300;
var y2=100;

// draw the lineRectangle
var lineRect=defineLineAsRect(x1,y1,x2,y2,20);
drawLineAsRect(lineRect,"black");


// overlay the line (just as visual proof)
drawLine(x1,y1,x2,y2,3,"red");


function drawLine(x1,y1,x2,y2,lineWidth,color){
ctx.fillStyle=color;
ctx.strokeStyle=color;
ctx.lineWidth=lineWidth;
ctx.save();
ctx.beginPath();
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.stroke();
ctx.restore();
}


function drawLineAsRect(lineAsRect,color){
var r=lineAsRect;
ctx.save();
ctx.beginPath();
ctx.translate(r.translateX,r.translateY);
ctx.rotate(r.rotation);
ctx.rect(r.rectX,r.rectY,r.rectWidth,r.rectHeight);
ctx.translate(-r.translateX,-r.translateY);
ctx.rotate(-r.rotation);
ctx.fillStyle=color;
ctx.strokeStyle=color;
ctx.fill();
ctx.stroke();
ctx.restore();
}


function defineLineAsRect(x1,y1,x2,y2,lineWidth){
var dx=x2-x1; // deltaX used in length and angle calculations
var dy=y2-y1; // deltaY used in length and angle calculations
var lineLength= Math.sqrt(dx*dx+dy*dy);
var lineRadianAngle=Math.atan2(dy,dx);

return({
translateX:x1,
translateY:y1,
rotation:lineRadianAngle,
rectX:0,
rectY:-lineWidth/2,
rectWidth:lineLength,
rectHeight:lineWidth
});
}


function handleMouseDown(e){
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);

// draw our lineRect
drawLineAsRect(lineRect,"transparent");

// test if hit in the lineRect
if(ctx.isPointInPath(mouseX,mouseY)){
alert('Yes');
}
}

canvas.addEventListener("mousedown", handleMouseDown, false);

}); // end $(function(){});
</script>

</head>

<body>
<canvas id="canvas" width=310 height=115></canvas>
</body>
</html>

关于html - Canvas:在线点击事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15587424/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com