是用戶在畫布上繪製區域中的鼠標

基本上，用戶上傳圖片然後可以在其上繪製並保存結果。另一位用戶可以查看照片，如果他們點擊與塗漆相同的區域，則會發生一些情況。因此，用戶1可以通過在照片上繪畫來使用戶2能夠點擊區域。是用戶在畫布上繪製區域中的鼠標

現在上傳位沒問題，並且在tutorial和example的幫助下進行了繪畫，我已經被遺忘了。但是確定可點擊的區域有點困難。對於像矩形這樣簡單的事情，我做了一個example。

var canvas = document.getElementById('myCanvas'); 
var context = canvas.getContext('2d'); 


var button = new Object(); 
    button.x = 50; 
    button.y = 50; 
    button.width = 50; 
    button.height = 50; 
    button.rgb = "rgb(0, 0, 255)"; 
    function drawbutton(buttonobject) 
    { 
     context.fillStyle = buttonobject.rgb; 
     context.fillRect (buttonobject.x, buttonobject.y, buttonobject.width, buttonobject.height); 
     context.strokeRect(buttonobject.x, buttonobject.y, buttonobject.width, buttonobject.height); 
    } 
    drawbutton(button); 


    function checkIfInsideButtonCoordinates(buttonObj, mouseX, mouseY) 
    { 
     if(((mouseX > buttonObj.x) && (mouseX < (buttonObj.x + buttonObj.width))) && ((mouseY > buttonObj.y) && (mouseY < (buttonObj.y + buttonObj.height)))) 
      return true; 
     else 
      return false; 
    } 

    $("#myCanvas").click(function(eventObject) { 
     mouseX = eventObject.pageX - this.offsetLeft; 
     mouseY = eventObject.pageY - this.offsetTop; 

     if(checkIfInsideButtonCoordinates(button, mouseX, mouseY)) 
     { 
      button.rgb = "rgb(0, 255, 0)"; 
      drawbutton(button); 
     } else { 
      button.rgb = "rgb(255, 0, 0)"; 
      drawbutton(button); 
     } 
    });

但是當涉及到其他形狀像圈子，或者只是有人窒息的頁面，你會怎麼去檢測呢？

想到我曾經使用過編輯過的圖層，使它隱藏起來，並且檢測到像藍色的像素顏色，但是這限制了照片的顏色使用，我不完全確定如何實現它。任何其他想法？

編輯：

我想通了界一些修補後，利用勾股定理，看看鼠標座標比半徑小，但這個假設的0,0圓心，所以後來抵消界實際中心鼠標。 example

function checkIfInsideButtonCoordinates(buttonObj, mouseX, mouseY) { 
actualX = mouseX - buttonObj.x 
actualY = mouseY - buttonObj.y 
mousesqX = actualX * actualX 
mousesqY = actualY * actualY 
sqR = buttonObj.r * buttonObj.r 
sqC = mousesqX + mousesqY 

if (sqC < sqR) return true; 
    else return false; 
}

來源

2013-06-22 Rudiger Kidd

只是讓我明白了，你想檢測什麼樣的形狀（S）的？因此，如果用戶＃1繪製了一條波浪線，您是否想要檢測波浪線或其邊界框或圖像的象限，那麼波浪線會被繪製在其他位置？ – markE

@markE的波浪線 –

下面是如何測試用戶＃2是否是內部用戶＃1的畫作

創建用於命中測試第二畫布用戶＃2是用戶＃1的畫裏面。

命中測試畫布與繪圖畫布大小相同，但它只包含用戶＃1的繪畫...而不是圖像。

當用戶＃1正在繪畫時，他們在繪畫畫布上繪畫。

enter image description here

當用戶＃1做畫，挽救他們從命中帆布所有作品。

你至少有2種方式從命中帆布保存用戶＃1的畫作：

序列化所有畫布上重新創建形狀所需的命令/路徑是用戶＃1油漆。
使用canvas.toDataURL將命中畫布保存爲圖像。

當用戶＃2點擊時，檢查命中畫布上相應的像素是否已填充或透明（alpha> 0）。

// getImageData for the hit-test canvas (this canvas just contains user#1's paintings) 
    imageDataData=hitCtx.getImageData(0,0,hit.width,hit.height).data; 

    // look at the pixel under user#2's mouse 
    // return true if that pixel is filled (not transparent) 
    function isHit(x,y){ 
     var pixPos=(x+y*hitWidth)*4+3; 
     return(imageDataData[pixPos]>10) 
    }

這裏是代碼和一個小提琴：http://jsfiddle.net/m1erickson/etA5a/

<!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; padding:15px; } 
    canvas{border:1px solid red;} 
</style> 

<script> 
$(function(){ 

    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 
    var hit=document.getElementById("hit"); 
    var hitCtx=hit.getContext("2d"); 
    var user2=document.getElementById("user2"); 
    var ctx2=user2.getContext("2d"); 

    var canvasOffset=$("#user2").offset(); 
    var offsetX=canvasOffset.left; 
    var offsetY=canvasOffset.top; 

    var imageDataData; 
    var hitWidth=hit.width; 

    var img=document.createElement("img"); 
    img.onload=function(){ 

     // left canvas: image+user#1 paintings 
     ctx.globalAlpha=.25; 
     ctx.drawImage(img,0,0); 
     ctx.globalAlpha=1.00; 
     scribble(ctx,"black"); 

     // mid canvas: just user#1 paintings (used for hittests) 
     scribble(hitCtx,"black"); 

     // right canvas: user#2 
     ctx2.drawImage(img,0,0); 

     imageDataData=hitCtx.getImageData(0,0,hit.width,hit.height).data; 

    } 
    img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/colorhouse.png"; 


    function scribble(context,color){ 
     context.beginPath(); 
     context.moveTo(70,2); 
     context.lineTo(139,41); 
     context.lineTo(70,41); 
     context.closePath(); 
     context.rect(39,54,22,30); 
     context.arc(73,115,3,0,Math.PI*2,false); 
     context.fillStyle=color; 
     context.fill(); 
    } 


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

     // If user#2 has a hit on user#1's painting, mid-canvas turns red 
     var color="black"; 
     if(isHit(mouseX,mouseY)){ color="red"; } 
     scribble(hitCtx,color); 
    } 


    function isHit(x,y){ 
     var pixPos=(x+y*hitWidth)*4+3; 
     return(imageDataData[pixPos]>10) 
    } 


    $("#user2").mousemove(function(e){handleMouseMove(e);}); 


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

</head> 

<body> 
    <p>Left: original image with user#1 painting</p> 
    <p>Mid: user#1 painting only (used for hit-testing)</p> 
    <p>Right: user#2 (move mouse over hit areas)</p> 
    <canvas id="canvas" width=140 height=140></canvas> 
    <canvas id="hit" width=140 height=140></canvas> 
    <canvas id="user2" width=140 height=140></canvas><br> 
</body> 
</html>

來源

2013-06-23 03:19:28 markE

這是驚人的，非常感謝你 –

是用戶在畫布上繪製區域中的鼠標

回答

相關問題