畫布和事件

請幫我理解畫布的事件。畫布和事件

以兩個方塊爲例。每個區域都有自己的區域，您需要處理此類事件：

將鼠標懸停在正方形上填充顏色。
單擊調用填充正方形的第三種顏色並顯示在單獨的塊中，例如正方形的ID。
因此，有可能只使用一個正方形。點擊第二個方塊將重置第一個方塊並從第二個方塊輸出數據。
將鼠標移動到鼠標附近的一個正方形區域時，會彈出一個窗口，顯示該正方形的ID。

而我該如何建立一個單獨的廣場鏈接？也就是說，用戶點擊一個調用該事件的鏈接，類似於單獨的方塊上的點擊。

HTML代碼

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<script type="text/javascript" src="scripts/canvas.js"></script> 
<script> 
    window.onload = function() 
    { 
     drawCanvas('mainCanvas'); 
    }; 
</script> 
</head> 
<body style="margin: 0px;"> 
    <canvas id="mainCanvas" width="300" height="200"></canvas> 
    <aside>ID of the square</aside> 
</body> 
</html>

JS代碼

function makeRect(x, y, w, h) 
{ 
    return { x: x, y: y, w: w, h: h }; 
} 

function drawCanvas(canvasId) 
{ 
    //// General Declarations 
    var canvas = document.getElementById(canvasId); 
    var context = canvas.getContext('2d'); 


    //// Color Declarations 
    var blackColor = 'rgba(0, 0, 0, 1)'; 
    var whiteColor = 'rgba(255, 255, 255, 1)'; 

    //// Frames 
    var frameOne = makeRect(64, 70, 50, 50); 
    var frameTwo = makeRect(194, 70, 50, 50); 


    //// RectangleOne Drawing 
    context.beginPath(); 
    context.rect(frameOne.x, frameOne.y, 50, 50); 
    context.fillStyle = whiteColor; 
    context.fill(); 
    context.strokeStyle = blackColor; 
    context.lineWidth = 1; 
    context.stroke(); 


    //// RectangleTwo Drawing 
    context.beginPath(); 
    context.rect(frameTwo.x, frameTwo.y, 50, 50); 
    context.fillStyle = whiteColor; 
    context.fill(); 
    context.strokeStyle = blackColor; 
    context.lineWidth = 1; 
    context.stroke(); 
}

來源

2014-01-08 user3174610

如果我理解正確，那麼您希望在呈現到畫布之後仍然可以選擇正方形，除非您保留一些持久性有關正方形的信息並執行一些相交測試，您不能在畫布上執行此操作，它們會丟失所有正方形的上下文，並且只是畫布上的像素。 – zero298

感謝您的回覆！那麼我應該注意使用SVG來提供交互性？ – user3174610

你問一個非常寬泛的問題！

這將讓你開始：

關於帆布矩形

當你畫就變成只是「畫像素」（如矩形的上一個藝術家的畫布上繪畫）的畫布上一個矩形。

關於矩形的任何內容都不會被畫布「記住」。

這意味着你不能通過命中檢測矩形來查看鼠標是否在該矩形上徘徊。畫布不知道你的矩形。

保持矩形

的軌道必須跟蹤每個矩形的屬性自己（x座標，y座標，寬度，高度，顏色）。

一個convienient辦法做到這一點是建立與矩形的屬性JavaScript對象：

var rect1 = { x:30, y:30, width:50, height:25, color:"blue" };

然後用這個Rect1的對象畫在畫布上的矩形

context.fillStyle=rect1.color; 
context.fillRect(rect1.x, rect1.y, rect1.width, rect1.height);

現在，您可以隨時請參閱rect1以獲取矩形的屬性。

鼠標事件

畫布的鼠標事件總是涉及到canvas元素本身，從來沒有在畫布上繪製一個矩形。

以下是如何聽鼠標事件畫布：

// use jQuery to ask the browser to call `handleMouseMove` whenever the mouse is moved 

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

// this is called every time your mouse moves 

function handleMouseMove(e){ 

    // get the mouses current X,Y position 
    // Note: offsetX/offsetY -- you must adjust for the offset of the canvas relative to the web page 

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

}

測試如果鼠標是RECT

記住帆布知道也不關心你的Rect1的裏面，所以使用Rect1的對象以「命中測試」鼠標是否在裏面rect1：

if(
    mouseX>=rect1.x && 
    mouseX<=rect1.x+rect1.width && 
    mouseY>=rect1.y && 
    mouseY<=rect1.y+rect1.height 
){ 

    // the mouse is inside rect1 

    ctx.fillStyle="red"; 
    ctx.fillRect(rect1.x,rect1.y,rect1.width,rect1.height); 

}else{ 

    // the mouse is not inside rect1 

    ctx.fillStyle=rect1.color; 
    ctx.fillRect(rect1.x,rect1.y,rect1.width,rect1.height); 

}

這個介紹應該讓你開始編碼... exp爲你自己！

這裏的工作演示：http://jsfiddle.net/m1erickson/tPjWX/

<!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"); 

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

    var rect1 = { x:30, y:30, width:50, height:25, color:"blue" }; 
    ctx.fillStyle=rect1.color; 
    ctx.fillRect(rect1.x,rect1.y,rect1.width,rect1.height); 

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

     if(
      mouseX>=rect1.x && 
      mouseX<=rect1.x+rect1.width && 
      mouseY>=rect1.y && 
      mouseY<=rect1.y+rect1.height 
     ){ 
       ctx.fillStyle="red"; 
       ctx.fillRect(rect1.x,rect1.y,rect1.width,rect1.height); 
      }else{ 
       ctx.fillStyle=rect1.color; 
       ctx.fillRect(rect1.x,rect1.y,rect1.width,rect1.height); 
      } 

    } 

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


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

</head> 

<body> 
    <canvas id="canvas" width=300 height=300></canvas> 
</body> 
</html>

來源

2014-01-08 19:25:43 markE

謝謝！一個問題變少了。但是，我如何實現交互方塊？顯示信息，並像單選按鈕一樣工作。 – user3174610

與編碼問題相比，這更像是一個設計決策。我可能會使用一個真正的html單選按鈕，但使用畫布可以監聽畫布單擊事件並切換繪製的單選按鈕而不是矩形：（1）在外部繪製具有完整半徑（2）的描邊圓，if檢查單選按鈕也會在內部繪製一個半徑較小的實心圓：http://jsfiddle.net/m1erickson/HdYLC – markE

非常感謝！ – user3174610

畫布只是一個元素。你能趕上事件不是正方形，圓形，行中的所有帆布...

但你可以持有方，線，圓的位置，並檢查「如果（鼠標在廣場位置的位置），並重繪帆布

個人而言，您可以嘗試使用SVG，並且您可以捕捉個別元素的事件

來源

2014-01-16 06:37:05 LogPi

回答

相關問題