Можно ли сослаться на несколько холстов html5 и имена переменных через цикл for? - PullRequest
Новая
       10

Можно ли сослаться на несколько холстов html5 и имена переменных через цикл for?

1 голос
/ 21 марта 2019

У меня есть 3 изображения «Имена», «Xpositions», «Ypositions», «scale» и «color values», хранящиеся в различных массивах, например: 

pictureNames["blahblah1, "somePic2", "anotherPic3"];
pictureXcoordinates[0, 43, 56];
pictureYcoordinates[0, 10, 20];
pictureScales[100, 100, 100]; //meaning percent
pictureColorRvalue[0, 0, 0];
pictureColorGvalue[0, 0, 0];
pictureColorBvalue[0, 0, 0];

Изображения в формате PNG предварительно загружаются и присваиваются в следующих переменных: picture0, picture1, picture2.

Я пытаюсь сохранить много строк кодирования, создав цикл for, чтобы нарисовать каждое изображение с его размером и координатами в свой собственный холст, а затем раскрасить их, получив данные изображения. Вот так: 

var counter;
for(counter = 0; counter <= 2; counter++){
            firstCtx.drawImage(picture1 ,pictureXcoordinates[counter], pictureYcoordinates[counter], picture0.width, picture0.height);
            firstCtx.restore();

            var imgData = firstCtx.getImageData(pictureXcoordinates[counter], pictureYcoordinates[counter], canvasW, canvasH);
                var i;
                for (i = 0; i < imgData.data.length; i += 4) {
                    imgData.data[i] = pictureColorRvalue[counter];
                    imgData.data[i+1] = pictureColorGvalue[counter];
                    imgData.data[i+2] = pictureColorBvalue[counter];
                }
            firstCtx.putImageData(imgData, shapePositionX[counter], shapePositionY[counter]);
            firstCtx.restore();

... но я не знаю, как ссылаться на «firstCtx», secondCtx »,« thirdCtx », используя переменную counter .... следует / могу ли я переименовать содержимое холста« canvas1Ctx »,« canvas2Ctx », и т.д .... и ссылаться на них с помощью "canvas" + counter + "Ctx" или чего-то в этом роде? И ссылаться на "picture0", "picture1" и "picture2".

1 Ответ

0 голосов
/ 21 марта 2019

Вот как я бы это сделал: Y создал бы класс объектов Picture, каждый со своим x, y и т. Д. ... и функцию, которая обрабатывает процесс рисования. 

let picturesArray = []

class Picture{
  constructor(x,y,width,height,scale,color,pictureName,canvas){
    this.x = x;
    this.y = y;
    this.w = width;
    this.h = height;
    this.scale = scale;
    this.color = color;
    this.picture = pictureName;
    this.canvas = canvas;
    this.ctx = this.canvas.getContext("2d")
  }

  draw(){
    this.ctx.drawImage(this.picture ,this.x, this.y, this.w, this.h);
    this.imgData = this.ctx.getImageData(this.x, this.y, this.canvas.width, this.canvas.height);
                for (let i = 0; i < imgData.data.length; i += 4) {
                    this.imgData.data[i] = this.color.r;
                    this.imgData.data[i+1] = this.color.g;
                    this.imgData.data[i+2] = this.color.b;
                }
            this.canvas.putImageData(this.imgData, this.x, this.y);
  }
}

Далее я бы создал картинку объектов и вставил новую картинку в массив картинок: 

picturesArray.push(new Picture(x,y,width,height,scale,color,pictureName,canvas));

Наконец, вы используете петлю for или forEach, чтобы нарисовать все картинки 

picturesArray.forEach(p=>{p.draw()})

Надеюсь, это поможет.

...