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

我从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

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

回答

相关问题