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

Question

我正在根據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

Answer 1

下面是一個將點盡可能移到左上方的實現。 如果地圖仍然太大，則必須將其縮放以適合畫布。

請注意，我更改了一些變量名，並在各個地方簡化了代碼。 要使畫布變大，請參見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>