將點擊添加到isPointinPath

當我的鼠標位於橙色長方形的路徑中時，綠色的長方形出現。我想將其更改爲鼠標橙色形狀和單擊。

只是爲了避免混淆，我把green(ctx)從init函數中拿出來，儘管我把函數green(ctx)作爲參考。它沒有任何用處。

<!DOCTYPE html> 

<!-- Created with Ai->Canvas Export Plug-In Version 1.0 (Mac) --> 
<!-- By Mike Swanson (http://blogs.msdn.com/mswanson/)  --> 
<!-- and MIX Online (http://visitmix.com/)     --> 

<html lang="en"> 
<head> 
    <meta charset="UTF-8" /> 
    <title>testclick</title> 
    <script> 

    function init() { 

     var canvas = document.getElementById("canvas"); 
     var ctx = canvas.getContext("2d"); 

     tan(ctx); 

     orange(ctx); 

     canvas.onmousemove = function (e) 
     { 
      var canvas = e.target; 
      var ctx = canvas.getContext('2d'); 

      // This gets the mouse coordinates (relative to the canvas) 
      var mouseX = e.clientX - canvas.getBoundingClientRect().left; 
      var mouseY = e.clientY - canvas.getBoundingClientRect().top; 


      // Replay the rectangle path (no need to fill() it) and test it 
      ctx.beginPath(); 
      ctx.moveTo(663.3, 254.3); 
      ctx.lineTo(516.0, 254.3); 
      ctx.lineTo(516.0, 176.7); 
      ctx.lineTo(663.3, 176.7); 
      ctx.lineTo(663.3, 254.3); 

      if (ctx.isPointInPath(mouseX, mouseY)) { 
       ctx.save(); 
       ctx.beginPath(); 
       ctx.moveTo(417.3, 320.7); 
       ctx.lineTo(113.3, 320.7); 
       ctx.lineTo(113.3, 0.0); 
       ctx.lineTo(417.3, 0.0); 
       ctx.lineTo(417.3, 320.7); 
       ctx.closePath(); 
       ctx.fillStyle = "rgb(60, 127, 60)"; 
       ctx.fill(); 
       ctx.restore(); 

      } 

     } 
    } 

    function tan(ctx) { 

     // tan/Path 
     ctx.save(); 
     ctx.beginPath(); 
     ctx.moveTo(393.3, 422.7); 
     ctx.lineTo(0.0, 422.7); 
     ctx.lineTo(0.0, 52.7); 
     ctx.lineTo(393.3, 52.7); 
     ctx.lineTo(393.3, 422.7); 
     ctx.closePath(); 
     ctx.fillStyle = "rgb(255, 238, 191)"; 
     ctx.fill(); 
     ctx.restore(); 
    } 

    function green(ctx) { 

     // green/Path 
     ctx.save(); 
     ctx.beginPath(); 
     ctx.moveTo(417.3, 320.7); 
     ctx.lineTo(113.3, 320.7); 
     ctx.lineTo(113.3, 0.0); 
     ctx.lineTo(417.3, 0.0); 
     ctx.lineTo(417.3, 320.7); 
     ctx.closePath(); 
     ctx.fillStyle = "rgb(60, 127, 60)"; 
     ctx.fill(); 
     ctx.restore(); 
    } 

    function orange(ctx) { 

     // orange/Path 
     ctx.save(); 
     ctx.beginPath(); 
     ctx.moveTo(663.3, 254.3); 
     ctx.lineTo(516.0, 254.3); 
     ctx.lineTo(516.0, 176.7); 
     ctx.lineTo(663.3, 176.7); 
     ctx.lineTo(663.3, 254.3); 
     ctx.closePath(); 
     ctx.fillStyle = "rgb(240, 89, 41)"; 
     ctx.fill(); 
     ctx.restore(); 
    } 


    </script> 
</head> 
<body onload="init()"> 
    <canvas id="canvas" width="664" height="423"></canvas> 
</body> 
</html>

來源

2014-02-19 user3320982

解釋你的問題......目前還不清楚你想要什麼。僅包含相關代碼** **。 –

你已經解決了這個問題 – user3320982

如果你只是想簡單地點擊時顏色改變取代：

canvas.onmousemove

與

canvas.onclick

A fiddle here（我希望我的理解是否正確這裏..）

來源

2014-02-19 19:31:17 K3N

這是'click'事件，對吧？他仍然可以使用'mousemove'事件來應用他的「橙色形狀」的東西，但是避免了它內部的任何點擊處理。 –

@AlejandroIván說實話，這個問題對我來說有點不清楚。也許OP可以在這方面多說一些。在任何情況下，他都可以保留mousemove並以不同的方式處理pointInPath結果。 – K3N

抱歉，如果我的問題不清楚。建議的變化確實奏效。我不改變顏色，但點擊橙色的時候添加綠色的形狀 – user3320982

將點擊添加到isPointinPath

回答

相關問題