動態地將畫布上的圖紙定位到容器的左上角

我從json文件中動態地創建了一個貼圖，但是由於x，y的原因，圖形最終不在屏幕上。我想要做的是將所有圖形移動到更靠近包含圖形的地圖元素的左側和頂部。動態地將畫布上的圖紙定位到容器的左上角

我嘗試了幾件事情，像在CSS上玩頂部，但然後該div在其他控件的頂部。另一個想法是修改現有的座標並對其進行一些數學運算，但我想知道是否有更好的方法。這裏我有什麼

var c=[]; 
c.push(["valu1",120,240]); 
c.push(["valu1",130,240]); 
c.push(["valu2",120,250]); 
c.push(["valu3",130,250]); 
c.push(["valu4",120,245]); 
c.push(["valu5",130,245]);

// 7k更多行將在這裏。

$("#refresh").on("click",function(){ 
    getdata(); 
}); 


function getdata() 
{ 
    for (var i in c) { 

     var x = c[i][1] 
     var y = c[i][2] 
     Paint(x,y); 

} 

} 

function Paint(x, y) { 
    var ctx, cv; 
    cv = document.getElementById('map'); 
    ctx = cv.getContext('2d'); 
    ctx.strokeStyle = '#666699'; 
    ctx.lineWidth = 1; 
    ctx.strokeRect(x, y, 10, 5); 
    ctx.stroke(); 
}

注意第一行x = 120.我想靠近我的元素的頂部。

這裏是jsfiddle。 JSFIDDLE

來源

2014-11-21 causita

如果你是路過'120，240'爲座標，它看起來好了給我。「靠近我元素的頂部」是什麼意思？你想讓桌子從'0,0'開始？在這種情況下，您可以從所有單元中減去特定的數量以使其與頂部對齊。 – Anubhav 2014-11-21 15:56:22

我現在正在做這件事，但我有不同的地圖和不同的值，一些地圖更接近頂部其他人的方式在底部。 – causita 2014-11-21 15:58:32

一種解決方案可以通過減去「x」像素來將最靠近頂部的值內插到「0」。減去所有其他的'x'，讓它們靠近頂端。 – Anubhav 2014-11-21 16:04:54

下面是一個實現，儘可能將點向左上方移位。如果地圖太大，則必須縮放以適應畫布。

請注意，我已經更改了一些變量名稱並在各個地方簡化了代碼。要使畫布變大，請參閱start()函數開頭處的參數。

var data = [ 
 
    ["a", 120, 240], 
 
    ["b", 130, 240], 
 
    ["c", 120, 250], 
 
    ["d", 130, 250], 
 
    ["e", 120, 245], 
 
    ["f", 130, 245] 
 
]; 
 

 
function drawBox(context, x, y, width, height) { 
 
    context.strokeStyle = '#666699'; 
 
    context.strokeRect(x, y, width, height); 
 
} 
 

 
function start() { 
 
    // The following are the display parameters. Set them to your liking. 
 
    var boxWidth = 10, boxHeight = 5, lineWidth = 2, 
 
     canvasWidth = 800, canvasHeight = 600; // Canvas dimensions. 
 

 
    var container = document.getElementById('container'), 
 
     canvas = container.getElementsByTagName('canvas')[0], 
 
     context = canvas.getContext('2d'); 
 
    context.lineWidth = lineWidth; 
 
    canvas.width = canvasWidth; 
 
    canvas.height = canvasHeight; 
 
    container.style.width = canvasWidth + 'px'; 
 
    container.style.height = canvasHeight + 'px'; 
 

 
    var n = data.length, 
 
     minX = data[0][1], 
 
     minY = data[0][2]; 
 
    for (var i = 1; i < n; ++i) { 
 
     var x = data[i][1], 
 
      y = data[i][2]; 
 
     if (x < minX) { 
 
      minX = x; 
 
     } 
 
     if (y < minY) { 
 
      minY = y; 
 
     } 
 
    } 
 
    for (var i = 0; i < n; ++i) { 
 
     var x = data[i][1], y = data[i][2], 
 
      X = lineWidth + x - minX, // Displace the points to upper right. 
 
      Y = lineWidth + y - minY; // Add padding to avoid clipping lines. 
 
     drawBox(context, X, Y, boxWidth, boxHeight); 
 
    } 
 
} 
 

 
window.onload = start;

#container { 
 
    border: 3px solid #eee; 
 
}

<div id="container"><canvas></canvas></div>

來源

2014-11-21 17:12:08

動態地將畫布上的圖紙定位到容器的左上角

回答

相關問題