如何獲得畫布在畫布中的位置

我想要做的是繪製簡單的形狀讓我們說鼠標矩形，並直接從畫布上獲取他的座標，高度和寬度，這可能嗎？如何獲得畫布在畫布中的位置

我寫了這個功能：

function getImageProperties(image){ 
    var xMin = image.width; 
    var xMax = 0; 
    var yMin = image.height; 
    var yMax = 0; 
    var w = image.width, h = image.height; 
    for (var y = 0; y < h; y ++) { 
     for (var x = 0; x < w; x ++) { 
      for (var c = 1; c < 5; c += 1) { 
      var i = (x + y * w) + c; 
      if(image.width* image.height * 4 != i){ 
       if(image.data[i] != 0){ 
        if(x<xMin) 
         xMin = x; 
        if(x>xMax) 
         xMax = x; 
        if(y<yMin) 
         yMin = y; 
        if(y>yMax) 
         yMax = y; 
       } 
      } 
     } 
     } 
    } 
    var imgProp = { 
     x : xMin, 
     y : yMin, 
     width: (xMax-xMin), 
     height : (yMax-yMin) 
    }; 
    return imgProp; 
}

其中

image = context.getImageData(0, 0, context.canvas.width, context.canvas.height);

，但返回的數據是不一樣的我送溺水的功能：/

來源

2011-05-09 sebastian

所以你試圖找到包圍所有非黑色像素的矩形？ – Alnitak 2011-05-09 07:23:12

好的。假設我應該看第4個像素的阿爾法。 var i =（x + y * w）* 4 + 3;和image.data [i]> 0，但結果仍然不準確。例如，當我在x中繪製矩形，y = 5,5時，我的功能重新獲得4,4。 – sebastian 2011-05-09 07:31:32

是的，因爲範圍'[min，max]'的_width_是'max-min + 1'，根據我的回答 – Alnitak 2011-05-09 07:40:29

它看起來就像你試圖找到包含圖像數據中所有非黑色像素的矩形，但如果是這樣，我可以看到一些小問題，主要是偏移計算。試試這個：

function getImageProperties(image){ 
    var xMin = image.width - 1; 
    var xMax = 0; 
    var yMin = image.height - 1; 
    var yMax = 0; 
    var w = image.width, h = image.height; 
    for (var y = 0; y < h; ++y) { 
     for (var x = 0; x < w; ++x) { 
      var i = 4 * (y * w + x); 
      for (var c = 0; c < 4; ++c, ++i) { 
       if (c != 3 && image.data[i]) { // ignore the alpha channel 
       xMin = Math.min(x, xMin); 
       xMax = Math.max(x, xMax); 
       yMin = Math.min(y, yMin); 
       yMax = Math.max(y, yMax); 
       } 
      } 
     } 
    } 

    return { 
     x : xMin, 
     y : yMin, 
     width: (xMax - xMin) + 1, 
     height : (yMax - yMin) + 1 
    }; 
}

這就是說，如果你只是繪製的矩形用鼠標它會更容易簡單地記錄最後兩對鼠標的事件處理程序使用的座標！

來源

2011-05-09 07:31:33 Alnitak

Thx，Alnitak。不完全是，我想在調整大小並在畫布中旋轉某個對象後使用此函數。在這種情況下，來自鼠標事件的座標將無法使用。 – sebastian 2011-05-09 07:43:47

Alnitak你的功能有一個錯誤。它返回圖像特性（寬度，高度等） - 1，因爲您應該只檢查alpha通道。當我改變這個工作。 – sebastian 2011-05-09 07:55:52

考慮到我們不得不繼續下去，這很不錯;-) – Alnitak 2011-05-09 08:34:28

你可以嘗試讀取像素顏色使用getImageData，但它確實不是一個好主意。

最好的方法是將位置和其他數據存儲在畫布外的數組中。

來源

2011-05-09 07:26:00

如何獲得畫布在畫布中的位置

回答

相關問題