懸停繪圖jquery畫布上的事件

ctx.beginPath(); 
ctx.moveTo((width - BarSpace * (i + 1)) - ((BarSpace - 10)/2), (yMax - data.open) * Valuesteps); 
ctx.lineTo((width - BarSpace * (i + 1)) - ((BarSpace - 10)/2), (yMax - data.close) * Valuesteps); 
ctx.lineTo((width - BarSpace * (i + 1)) + ((BarSpace - 10)/2), (yMax - data.close) * Valuesteps); 
ctx.lineTo((width - BarSpace * (i + 1)) + ((BarSpace - 10)/2), (yMax - data.open) * Valuesteps); 
ctx.lineTo((width - BarSpace * (i + 1)) - ((BarSpace - 10)/2), (yMax - data.open) * Valuesteps); 
ctx.fillStyle = "green"; 
ctx.fill(); 
ctx.stroke();

在畫布上繪圖是一個盒子，我只需要顯示某種數據，當我畫的盒子懸停在畫布上時是否有可能的方式來做到這一點？如果我的鼠標懸停在該盒子上，事件會聽。懸停繪圖jquery畫布上的事件

來源

2014-02-07 bRaNdOn

畫布只是一個被動的位圖。任何吸引它的東西都會與其他任何東西混合在一起，瀏覽器將無法區分一張圖和另一張圖。

爲了達到這個目的，你需要實現自己的邏輯。

這樣做的一個典型方法是將形狀存儲在您執行主要處理的陰影數組中，然後使用畫布僅顯示數組中的內容。

例如，對於一個盒子，你可以簡單地使用自定義的矩形對象：

function Rect(x, y, width, height, fColor, sColor) { 

    this.x = x; 
    this.y = y; 
    this.width = width; 
    this.height = height; 
    this.fillStyle = fillColor || 'rgba(0, 0, 0, 0)'; 
    this.strokeStyle = strokeColor || '#000'; 

    this.render = function(ctx) { 
     ctx.fillStyle = this.fillStyle; 
     ctx.strokeStyle = this.strokeStyle; 
     ctx.fillRect(this.x, this.y, this.width, this.height); 
     ctx.strokeRect(this.x, this.y, this.width, this.height); 
    } 
}

現在你可以創建你的盒子是這樣的：

/// calc x, y, w, h based on the line coordinates you already have 
var rect1 = new Rect(x, y, w, h, 'green', '#f00');

然後渲染它，當你需要以帆布更新它：

rect1.render(ctx);

處理鼠標懸停：

var isInside = false; 

canvas.onmousemove = function(e) { 

    /// correct mouse position 
    var rect = canvas.getBoundinClientRect(), 
     x = e.clientX - rect.left, 
     y = e.clientY - rect.top; 

    if (x >= rect1.x && x < rect1.x + rect1.width && 
     y >= rect1.y && y < rect1.y + rect1.height && 
     !isInside) { 

     isInside = true; /// prevent unnecessary redraw of same state 

     rect1.fillStyle = '#f90'; 
     rect1.render(ctx); 

    } else if (isInside) { 
     isInside = false; /// reset flag 

     rect1.fillStyle = 'green'; 
     rect1.render(ctx); 
    } 
}

要觸發大約相同的代碼一些行動，利用：

canvas.onclick = function(e) { 

    /// correct mouse position 
    var rect = canvas.getBoundinClientRect(), 
     x = e.clientX - rect.left, 
     y = e.clientY - rect.top; 

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

     callFunctionHere(); 
    } 
}

希望這將幫助您在正確的方向。

來源

2014-02-07 10:46:46 K3N

懸停繪圖jquery畫布上的事件

回答

相關問題