мне нужно рисовать линии, используя массив координат - PullRequest
Новая
       18

мне нужно рисовать линии, используя массив координат

0 голосов
/ 16 июня 2020 

var canvas_ele = document.getElementById("lineCanvas");
var ctx = canvas_ele.getContext("2d");

var a = [
  [65, 455],
  [232, 357],
  [476, 316],
  [754, 67]
];

ctx.beginPath();
ctx.moveTo(a[0]);
ctx.lineTo(a[1]);
ctx.lineTo(a[2]);
ctx.lineTo(a[3]);
ctx.stroke();
<canvas id="lineCanvas" width="800" height="600" style="border:1px solid #000000;"></canvas>

Ответы [ 3 ]

1 голос
/ 17 июня 2020

Path2D

Вы можете использовать Path2D для создания путей.

В примере create добавляется много меньших Path2D объектов для создания одного объекта Path2D, который может быть отображен с помощью всего одного вызова, и это намного быстрее, чем воссоздавать путь каждый раз, когда вам нужно его визуализировать.

Функция createLine создает путь из массив точек пути [[x, y], [x, y]] (с возможностью закрытия пути), а createLines создает пути из массива массивов точек пути, `[[[x, y], [x, y]]], [[x, y ], [x, y]]].

Обратите внимание на , что при создании нового пути нет необходимости делать первый вызов moveTo, вы можете использовать lineTo в качестве будет действовать как moveTo. То же самое относится и к рендерингу в 2D-контексте. Вы можете использовать lineTo вместо moveTo сразу после beginPath. Это делает кодирование более компактным при итерации точечных данных. 

const data = [[[58,12],[62,12],[66,13],[67,17],[67,22],[61,25],[55,27],[48,30],[42,33],[42,40],[43,47],[43,54],[43,61],[43,68],[44,75],[44,82],[44,89],[44,96],[40,97],[35,97],[33,90],[33,83],[32,75],[32,68],[32,61],[32,54],[31,46],[31,39],[26,40],[20,43],[15,43],[13,39],[13,35],[17,30],[24,28],[31,24],[38,21],[45,18],[51,15],[58,12]],[[200,13],[207,13],[214,13],[220,13],[227,14],[234,14],[240,16],[246,17],[252,19],[254,22],[254,26],[252,30],[246,30],[241,29],[235,28],[234,35],[233,42],[232,49],[231,56],[230,63],[229,70],[228,77],[227,84],[226,91],[225,98],[222,103],[218,103],[213,102],[213,97],[213,92],[214,85],[215,79],[216,72],[218,65],[219,59],[220,52],[221,45],[222,38],[223,32],[224,25],[218,25],[212,24],[206,24],[200,25],[194,24],[194,20],[195,15],[200,13]],[[159,20],[165,20],[171,20],[177,21],[180,25],[184,29],[184,36],[180,37],[175,37],[172,34],[168,31],[162,32],[159,35],[155,38],[153,42],[151,46],[152,51],[157,53],[163,52],[168,51],[174,51],[180,51],[183,54],[187,58],[189,63],[191,68],[191,74],[191,80],[191,86],[189,90],[187,94],[181,97],[176,100],[169,103],[163,103],[158,103],[152,103],[146,100],[143,96],[140,91],[140,86],[140,81],[142,76],[149,76],[151,82],[153,89],[158,92],[164,91],[169,89],[175,87],[177,84],[180,80],[179,74],[177,68],[175,63],[169,63],[163,64],[157,64],[151,64],[146,62],[141,58],[140,51],[140,44],[141,37],[144,33],[148,28],[151,24],[155,22],[159,20]],[[109,21],[113,21],[117,21],[119,26],[119,31],[113,34],[106,37],[99,37],[91,37],[84,36],[84,43],[84,50],[84,57],[90,57],[96,57],[102,56],[108,56],[110,59],[110,63],[108,67],[102,68],[96,68],[90,68],[84,69],[84,75],[84,80],[84,86],[91,87],[98,87],[106,88],[113,89],[117,93],[117,100],[111,101],[104,100],[98,99],[91,98],[85,97],[82,100],[75,100],[73,99],[73,92],[73,84],[73,77],[73,70],[73,63],[73,55],[73,48],[73,41],[73,33],[73,27],[73,26],[77,22],[83,22],[88,24],[94,26],[100,26],[104,24],[109,21]],[[102,126],[108,126],[114,127],[121,128],[127,128],[133,128],[137,129],[141,132],[139,138],[133,138],[126,137],[127,144],[127,151],[128,158],[128,165],[128,172],[128,179],[127,185],[126,191],[125,197],[124,203],[121,205],[115,204],[116,196],[117,190],[118,182],[120,175],[120,168],[120,161],[119,155],[118,148],[118,141],[116,136],[111,136],[105,135],[100,134],[100,130],[102,126]],[[188,127],[195,129],[194,136],[193,143],[191,150],[190,157],[188,164],[188,171],[188,178],[188,184],[188,191],[189,198],[190,205],[186,205],[181,204],[180,198],[180,192],[179,185],[179,179],[179,173],[173,172],[167,170],[163,170],[159,170],[159,177],[158,183],[157,190],[156,196],[155,203],[151,204],[146,203],[147,196],[148,189],[149,182],[151,175],[151,168],[151,162],[150,155],[149,148],[148,141],[146,135],[147,128],[151,128],[155,130],[156,136],[157,142],[158,148],[159,154],[159,159],[159,160],[166,161],[173,162],[180,164],[181,158],[182,151],[182,145],[184,140],[186,133],[188,127]],[[78,129],[82,129],[87,129],[91,131],[95,133],[99,138],[102,143],[106,149],[106,156],[106,163],[106,169],[105,176],[104,183],[103,190],[101,195],[99,201],[96,202],[91,203],[90,199],[90,194],[93,188],[94,182],[87,181],[80,180],[72,179],[65,179],[66,185],[66,191],[67,197],[68,204],[61,205],[59,201],[57,196],[57,190],[57,184],[57,178],[57,172],[57,166],[60,160],[62,153],[64,147],[67,141],[71,137],[74,133],[78,129]],[[34,130],[40,130],[46,131],[52,132],[55,136],[59,141],[59,147],[58,154],[57,159],[56,165],[51,169],[46,172],[41,172],[35,172],[36,178],[37,185],[38,191],[38,197],[38,202],[37,208],[32,208],[29,204],[29,197],[29,189],[28,182],[27,175],[26,168],[26,160],[26,154],[26,153],[25,146],[21,145],[22,140],[23,136],[28,133],[34,130]],[[216,133],[222,133],[229,133],[232,136],[235,139],[236,143],[236,147],[229,148],[225,143],[218,143],[215,147],[212,151],[209,155],[210,160],[216,161],[221,160],[227,160],[233,160],[237,165],[241,171],[241,178],[241,184],[241,191],[238,197],[233,199],[229,202],[224,204],[217,204],[210,204],[205,201],[201,197],[201,192],[201,186],[202,181],[209,182],[209,189],[212,192],[215,195],[222,193],[229,191],[233,185],[232,179],[231,175],[229,170],[222,170],[216,171],[209,171],[205,169],[201,166],[201,160],[201,154],[201,148],[203,145],[205,141],[210,137],[216,133]],[[39,139],[32,141],[33,148],[34,156],[36,163],[40,163],[45,162],[47,158],[50,154],[50,150],[50,145],[47,141],[43,140],[39,139]],[[83,139],[78,144],[73,150],[71,156],[68,163],[66,169],[72,170],[78,170],[84,171],[90,172],[96,174],[96,168],[97,163],[97,157],[96,151],[93,146],[89,141],[83,139]],[[194,213],[198,213],[202,214],[203,218],[203,223],[198,224],[192,223],[192,218],[194,213]],[[215,218],[219,218],[223,219],[224,223],[224,228],[219,229],[213,228],[213,223],[215,218]],[[186,227],[187,234],[191,235],[190,242],[194,239],[196,243],[201,240],[202,244],[205,244],[206,240],[213,242],[214,235],[214,240],[219,244],[224,247],[219,247],[214,245],[211,248],[207,250],[203,250],[199,250],[199,244],[196,244],[194,249],[192,243],[189,243],[188,247],[185,246],[183,240],[183,234],[176,234],[183,232],[186,227]]];

function createLine(points, close = true) {
    const line = new Path2D;
    for (const point of points) { line.lineTo(...point) }
    close && line.closePath();
    return line;
}

function createLines(lines) {
    const paths = new Path2D;
    for (const line of lines) { paths.addPath(createLine(line)) }
    return paths;
}

const myLines = createLines(data);    
canvas.getContext("2d").stroke(myLines);
<canvas id="canvas" width="256" height="256"></canvas>
1 голос
/ 16 июня 2020

Метод .moveTo() ожидает два аргумента: x и y. В настоящее время вы предоставляете один аргумент в виде массива [x, y]. У вас есть несколько способов исправить это, один из них - использовать .apply(ctx, a[i]). Другой, более современный способ - использовать синтаксис распространения для использования двух элементов в массивах в качестве отдельных аргументов: 

var canvas_ele = document.getElementById("lineCanvas");
var ctx = canvas_ele.getContext("2d");

var a = [
  [65, 455],
  [232, 357],
  [476, 316],
  [754, 67]
];

ctx.beginPath();
ctx.moveTo.apply(ctx, a[0]); // es5 friendly
ctx.lineTo(...a[1]); // es6+
ctx.lineTo(...a[2]);
ctx.lineTo(...a[3]);
ctx.stroke();
<canvas id="lineCanvas" width="800" height="600" style="border:1px solid #000000;"></canvas>

Вы можете улучшить качество своего кода, не повторяя себя и используя for-l oop вместо l oop в массиве: 

var canvas_ele = document.getElementById("lineCanvas");
var ctx = canvas_ele.getContext("2d");

var a = [
  [65, 455],
  [232, 357],
  [476, 316],
  [754, 67]
];

ctx.beginPath();
for(var i = 0; i < a.length; i++) {
  ctx.lineTo.apply(ctx, a[i]); 
}
ctx.stroke();
<canvas id="lineCanvas" width="800" height="600" style="border:1px solid #000000;"></canvas>
0 голосов
/ 16 июня 2020 

<html>
<body>
    <canvas id="lineCanvas" width="800" height="600" style="border:1px solid #000000;"></canvas>  
</body>

<script>

    var canvas_ele = document.getElementById("lineCanvas");
    var ctx = canvas_ele.getContext("2d");

    var a = 
    [        
        [6,455],
        [232,357],
        [476,316],
        [754,67]
    ];

    ctx.beginPath();
    ctx.moveTo(a[0][0],a[0][1]);
    ctx.lineTo(a[1][0],a[1][1]);
    ctx.lineTo(a[2][0],a[2][1]);
    ctx.lineTo(a[3][0],a[3][1]);
    ctx.stroke();

</script>

</html>


var canvas_ele = document.getElementById ("lineCanvas"); var ctx = canvas_ele.getContext ("2d"); var a = [[6,455], [232,357], [476,316], [754,67]]; ctx.beginPath (); ctx.moveTo (a [0] [0], a [0] [1]); ctx.lineTo (a [1] [0], a [1] [1]); ctx.lineTo (a [2] [0], a [2] [1]); ctx.lineTo (a [3] [0], a [3] [1]); ctx.stroke ();

...