遍历坐标数组以在html画布上绘制线 [英] Looping through an Array of coordinates to draw line on a html canvas
问题描述
我也试图遍历一个坐标数组以在html画布上绘制几行.
I'm trying too loop through an Array of coordinates to draw several lines on a html canvas.
似乎每条线都被画在彼此的顶部，并且该线不是从循环中的新坐标开始的.
It seems like each line is being drawn on top of each other and the line is not starting from a new coordinate in the loop.
var c = document.getElementById("lineCanvas");
var ctx = c.getContext("2d");
var data = [
[
[
6.87462062085475,
45.9746815056445,
2494.80004882813
],
[
6.87473799526779,
45.9772917433492,
2517.48754882813
]
],
[
[
6.87473461365077,
45.9772995683242,
2517.2578125
],
[
6.8736121249999,
45.9779670155837,
2542.50024414063
],
[
6.87299210781629,
45.9781103097697,
2579.26586914063
],
[
6.87223679891952,
45.9780976249557,
2623.55834960938
],
[
6.87169006623871,
45.9782141639712,
2674.02709960938
],
[
6.87133154968397,
45.9781620504641,
2706.29272460938
],
[
6.87084326975906,
45.9784539456999,
2685.76708984375
],
[
6.87055838217719,
45.9797052404885,
2641.150390625
],
[
6.86775431929958,
45.9838701463132,
2541.81811523438
],
[
6.86677434685096,
45.9850426033623,
2518.7724609375
],
[
6.86471620539337,
45.9859078090035,
2482.7353515625
],
[
6.86083954284208,
45.9857654302634,
2422.5908203125
],
[
6.85678792479354,
45.9856953809239,
2334.52661132813
],
[
6.85371440538845,
45.9861255880752,
2300.64892578125
],
[
6.85374919591106,
45.987623548574,
2328.4541015625
],
[
6.85538813707532,
45.9885247948691,
2368.02124023438
],
[
6.8571299935713,
45.9893949398974,
2430.18969726563
],
[
6.85762330877777,
45.9903535872519,
2444.35400390625
],
[
6.85792368848341,
45.991104963556,
2470.85522460938
],
[
6.86062047783254,
45.9926610042636,
2358.318359375
],
[
6.86367918950193,
45.9952411154904,
2238.4580078125
],
[
6.86651311990744,
45.9958393525819,
2198.28515625
],
[
6.86802868822584,
45.9967659531001,
2163.53515625
],
[
6.86890726501023,
45.9985394379416,
2082.47192382813
],
[
6.86946764936131,
45.9989288273475,
2065.57006835938
]
]
];
var previous = [0, 0];
$.each(data, function( index, value ) {
$.each(value, function( index, value ) {
ctx.moveTo(previous[0], previous[1]);
ctx.lineTo(value[0], value[1]);
ctx.stroke();
previous = value;
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="lineCanvas" width="800" height="600" style="border:1px solid #000000;"></canvas>示例: https://jsfiddle.net/ocrn9L13/
推荐答案
很多时候，您从外部来源获取一些数据，并且这些信息的缩放比例无法满足您的渲染需求.
There are many times you get some data from an external source and that information is not scaled to suit your rendering needs.
帮助缩放数据的一种方法是找到范围，即最大和最小x和y坐标.
One way to help scale the data is to find the extent, ie the max and min x and y coordinates.
一旦有了范围，就可以缩放它以适合任何坐标系.
Once you have the extent you can scale it to fit any coordinate system.
下面是对您的代码进行修改以执行我上面刚刚描述的操作.它对数据进行两次传递.首先是找到x，y的最小值和最大值.找到最小值和最大值后，我将计算x，y的范围，然后转换和缩放数据以适合画布，并随即渲染点.
Below is your code modified to do what I just described above. It does two passes over the data. The first is to find the min and max values of x,y. Once that min and max have been found, I calculate the range for x,y and then translate and scale the data to fit the canvas, rendering the points as I go.
使用x，y范围之外的最大范围对坐标进行标准化，并最小化画布的宽度或高度，以按比例放大(或缩小)以适合画布.在进行标准化和缩放之前，将minx，miny位置转换为0,0.有关逐步过程，请参见代码.
Use the max range out of the x,y extent to normalize the coordinates and the min width, or height of the canvas to scale scale up (or down) to fit the canvas. You translate the minx,miny position to 0,0 before you normalise and scale. See code for the step by step process.
var c = lineCanvas;
var ctx = c.getContext("2d");
var data = [
[
[
6.87462062085475,
45.9746815056445,
2494.80004882813
],
[
6.87473799526779,
45.9772917433492,
2517.48754882813
]
],
[
[
6.87473461365077,
45.9772995683242,
2517.2578125
],
[
6.8736121249999,
45.9779670155837,
2542.50024414063
],
[
6.87299210781629,
45.9781103097697,
2579.26586914063
],
[
6.87223679891952,
45.9780976249557,
2623.55834960938
],
[
6.87169006623871,
45.9782141639712,
2674.02709960938
],
[
6.87133154968397,
45.9781620504641,
2706.29272460938
],
[
6.87084326975906,
45.9784539456999,
2685.76708984375
],
[
6.87055838217719,
45.9797052404885,
2641.150390625
],
[
6.86775431929958,
45.9838701463132,
2541.81811523438
],
[
6.86677434685096,
45.9850426033623,
2518.7724609375
],
[
6.86471620539337,
45.9859078090035,
2482.7353515625
],
[
6.86083954284208,
45.9857654302634,
2422.5908203125
],
[
6.85678792479354,
45.9856953809239,
2334.52661132813
],
[
6.85371440538845,
45.9861255880752,
2300.64892578125
],
[
6.85374919591106,
45.987623548574,
2328.4541015625
],
[
6.85538813707532,
45.9885247948691,
2368.02124023438
],
[
6.8571299935713,
45.9893949398974,
2430.18969726563
],
[
6.85762330877777,
45.9903535872519,
2444.35400390625
],
[
6.85792368848341,
45.991104963556,
2470.85522460938
],
[
6.86062047783254,
45.9926610042636,
2358.318359375
],
[
6.86367918950193,
45.9952411154904,
2238.4580078125
],
[
6.86651311990744,
45.9958393525819,
2198.28515625
],
[
6.86802868822584,
45.9967659531001,
2163.53515625
],
[
6.86890726501023,
45.9985394379416,
2082.47192382813
],
[
6.86946764936131,
45.9989288273475,
2065.57006835938
]
]
];
var minx,miny,maxx,maxy;
miny = minx = Infinity
maxx = maxy = -Infinity;
data.forEach(dat => {
dat.forEach(point => {
minx = Math.min(minx,point[0]);
miny = Math.min(miny,point[1]);
maxx = Math.max(maxx,point[0]);
maxy = Math.max(maxy,point[1]);
});
});
var rangeX = maxx - minx;
var rangeY = maxy - miny;
var range = Math.max(rangeX,rangeY);
var scale = Math.min(c.width,c.height);
data.forEach(dat => {
ctx.beginPath();
dat.forEach(point => {
var x = point[0];
var y = point[1];
x = ((x-minx) / range) * scale;
y = ((y-miny) / range) * scale;
ctx.lineTo(x,y);
});
ctx.stroke();
});
<canvas id="lineCanvas" width="800" height="600" style="border:1px solid #000000;"></canvas>这篇关于遍历坐标数组以在html画布上绘制线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
