javascript - 将 Canvas 绘图动态定位到容器的左上角

Question

我正在从 json 文件动态创建 map ，但由于 x,y 的原因，绘图最终超出了屏幕。我想要做的是将所有绘图移动到更靠近包含绘图的 map 元素的左侧和顶部。

我尝试了一些事情，比如在 css 中使用 top，但随后 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

下面是一个尽可能将点移向左上角的实现。如果 map 仍然太大，则必须对其进行缩放以适合 Canvas 。

请注意，我更改了一些变量名称并精简了各个地方的代码。要使 Canvas 更大，请参阅 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>