Question

我是从json文件动态创建地图但由于x，y，图形最终会在屏幕外显示。我想要做的是将所有绘图移动到更靠近包含绘图的地图元素的左侧和顶部。

我尝试了很多东西，比如在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

以下是尽可能将点向左上方移位的实现。如果地图仍然太大，则必须缩放以适合画布。

请注意，我更改了一些变量名称并简化了各个地方的代码。要使画布更大，请参阅start()函数开头的参数。

＆＃13;

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;

＆＃13;

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

＆＃13;

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

＆＃13;

将画布绘图动态定位到容器的左上角

1 个答案: