1
A
回答
3
是的,你是對的。
新的isPointInPath()僅適用於「胖」行的中心線 - 不是行的全部寬度。
它更人性化的封閉圖形是超過1個像素寬;)
用於您的具體問題解決辦法:不要畫脂肪線,繪製一個20像素寬的矩形。
這裏是代碼和一個小提琴: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>
相關問題
- 1. 帆布串點擊檢測
- 2. 帆布對角線運動
- 3. 帆布畫線動畫
- 4. Android帆布:畫線與填充延長觸摸/點擊區域
- 5. 檢測哪個帆布矩形點擊
- 6. Unicoin開採和帆布點擊
- 7. 平局圈帆布點擊選項
- 8. 帆布圈和線
- 9. 鉻帆布線性漸變= Firefox的帆布線性漸變
- 10. Android上帆布
- 11. 帆布上的彩色線LineTo
- 12. 優化帆布動畫(正弦曲線)
- 13. JavaFX - 畫布上的可點擊線
- 14. HTML5帆布:直接移動到點
- 15. 家長在DIV點擊活動上接過孩子點擊活動
- 16. 帆布線角怪渲染
- 17. 切割斜線帆布/ Javascript?
- 18. JavaFX帆布:繪製虛線
- 19. 動畫用帆布
- 20. 在每個EditText上執行根佈局上的活動過渡動畫點擊
- 21. HTML5帆布遊戲將鼠標點擊到鼠標點。
- 22. 取消上次點擊Google Analytics活動
- 23. Bootstrap Acccordion上的活動狀態點擊
- 24. 點擊活動菜單上的類
- 25. 查看按鈕上的活動點擊
- 26. 列表上的新活動點擊
- 27. 活動在youtube上點擊API
- 28. fullcalendar上的一天點擊活動
- 29. HTML5帆布 - 放大點
- 30. 計算X,帆布點
您是否有繪製矩形而不是線條的示例?如果你想通過mousemoves創建線條並且你不知道線條位置,我認爲這很難做到。 – Maxii 2013-03-23 20:43:15
編輯我的答案,爲你包括一個例子:) – markE 2013-03-26 18:12:05