HTML5畫布鼠標

喜歡的東西我有：HTML5畫布鼠標

 

    function mouseClick(event) { 
     ... 
    } 
    canvas.addEventListener("mousedown", mouseClick, false); 
    function drawRect(x, y) { 
     context.fillRect(x, y, 16, 16); 
    }; 
    drawRect(10, 10);

如何做這樣的事情，如果我在畫布點擊我的矩形得到的東西？類似於如果我點擊Rect get alert;

對不起，我的英文。

來源

2011-08-28 vuohu

看看帆布圖書館像[fabric.js]工作（ http://kangax.github.com/fabric.js/demos/kitchensink/） – kangax

畫布不過是一個位圖。沒有記錄表明在畫布上繪製了一個矩形，所以如果您想要檢測到點擊是在您繪製矩形的區域內，則必須記錄您繪製的區域並進行測試反對他們。例如：

var rects= []; 

function mouseClick(event) { 
    // Get position of click relative to canvas. This is not reliable! Requires 
    // standards mode, and the canvas not being nested in other offsetParents. 
    // Getting page-relative co-ordinates reliably in all cases is outside the 
    // scope of this question... 
    // 
    var x= event.clientX-document.documentElement.scrollLeft-canvas.offsetLeft; 
    var y= event.clientY-document.documentElement.scrollTop-canvas.offsetTop; 

    // Hit-test each rectangle in the list of those drawn 
    // 
    for (var i= rects.length; i-->0;) { 
     var x0= rects[i][0], y0= rects[i][1], x1= rects[i][2], y1= rects[i][3]; 
     if (x0<=x && x<x1 && y0<=y && y<y1) { 
      alert('you clicked on a rectangle!'); 
     } 
    } 
} 
function drawRect(x, y) { 
    rects.push([x, y, x+16, y+16]) 
    context.fillRect(x, y, 16, 16); 
}; 
drawRect(10, 10);

如果你做了很多這樣的事情，你很可能會更好使用保留的模式繪圖系統，如SVG，而不是純粹的位圖畫布。在SVG中，您可以直接在矩形對象上偵聽點擊事件，移動矩形，重新堆疊等等。

來源

2011-08-28 22:23:24 bobince

addEventListener很棘手。我會嘗試是

canvas.addEventListener.apply(canvas, ["mousedown", mouseClick, false]);

或使用匿名函數。

canvas.addEventListener.apply(canvas, ["mousedown", function(){ mouseClick(); }, false]);

使用的應用功能，可以幫助確保eventListener被應用到合適的元素。你可以閱讀關於它here。

來源

2011-08-28 21:57:18

我想你所說的是，當你點擊你在畫布上繪製的對象時，你希望事件發生。我已經寫了幾個tutorials關於如何製作持久形狀並用鼠標點擊移動它們。這應該給你一個很好的起點。

來源

2011-08-28 22:19:45

$(canvas).mousedown(function myDown(e) 
{ 
    var position = $(canvas).position(); 
    var x = e.pageX-position.left; 
    var y = e.pageY-position.top; 
    ... 
});

這是更好的方法來做到這一點！

來源

2012-06-14 05:55:18 zi0408

你也可以嘗試一下Concrete.js http://www.concretejs.com這是一個增加交互性的輕量級畫布框架。你只需要這樣做：

var key = canvas.getIntersection（x，y）;

如果x，y與您使用給定鍵繪製的圖形相交，則返回該鍵，並且您知道懸停/點擊的是什麼。

這是一個更好的解決方案，因爲它會在任何你畫，包括圓，直線，曲線，多邊形，任意斑點等

來源

2016-04-01 20:10:12

HTML5畫布鼠標

回答

相關問題