с трудом рисует несколько полигонов на холсте.пожалуйста, посмотрите - PullRequest
Новая
       10

с трудом рисует несколько полигонов на холсте.пожалуйста, посмотрите

0 голосов
/ 08 октября 2018

Я хочу нарисовать несколько полигонов на холсте, фон которого является изображением.Я загружаю точки многоугольника из файла json и сохраняю его в массив, а затем перебираю массив, чтобы нарисовать многоугольники.но пока только первый полигон рисуется, несмотря ни на что, потратил три дня на эту проблему.пожалуйста, посмотрите и помогите мне перейти к следующим шагам моего проекта.спасибо!

например, json ниже: 

var jsonf = {
      "shapes": [
        {
          "line_color": [0, 255, 255, 255], 
          "points": [[217, 44], [210, 43], [208, 35], [209, 28], [215, 25], [219, 31], [219, 39]], 
          "fill_color": [0, 0, 0, 128], 
          "label": "Haemorrhages-Resized"
        }, 
        {
          "line_color": [0, 255, 255, 255], 
          "points": [[384, 60], [378, 56], [378, 48], [384, 45], [388, 51], [385, 58]], 
          "fill_color": [0, 0, 0, 128], 
          "label": "Haemorrhages-Resized"
        }
      ]
    }

у этого json может быть много записей "фигур", я просто для краткости показываю здесь две из них!

сейчас, извлекая точки из json и сохраняя их в массиве 'points' и используя его для рисования полигонов, код ниже: 

var points = [];

var canvas = document.getElementById("myCanvas");

var cw=canvas.width;
var ch=canvas.height;

var ctx = canvas.getContext("2d");
ctx.clearRect(0,0,cw,ch);

for (var i=0; i<jsonf.shapes.length; i++) {

   for (var j=0; j<jsonf.shapes[i].points.length; j++) {
     points.push({x: jsonf.shapes[i].points[j][0], y: jsonf.shapes[i].points[j][1]});
   }

   ctx.fillStyle = 'rgba(0, 0, 0, 128)';
   ctx.strokeStyle = 'rgba(0, 255, 255, 255)';
   ctx.lineWidth= 1;

   ctx.beginPath();
   ctx.moveTo(points[0].x, points[0].y);
   for(var index=1; index<points.length; index++) {
     ctx.lineTo(points[index].x, points[index].y);
   }

   ctx.closePath();
   ctx.fill();
   ctx.stroke();

   points = [];
}

что мне не хватает?Спасибо!

...