帆布：線上點擊活動

請看看這個小example。點擊處理程序只在點擊行的中間時才起作用。看起來方法isPointInPath不考慮線的寬度。有沒有辦法解決這個問題？帆布：線上點擊活動

來源

2013-03-23 Maxii

是的，你是對的。

新的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>

來源

2013-03-23 15:08:39 markE

您是否有繪製矩形而不是線條的示例？如果你想通過mousemoves創建線條並且你不知道線條位置，我認爲這很難做到。 – Maxii 2013-03-23 20:43:15

編輯我的答案，爲你包括一個例子:) – markE 2013-03-26 18:12:05

帆布：線上點擊活動

回答

相關問題