Странное поведение с параметрами в классе ES6 - PullRequest
Новая
       28

Странное поведение с параметрами в классе ES6

0 голосов
/ 01 августа 2020

У меня есть класс, который содержит параметр с именем values. Это используется для сохранения значений точек, которые представляют определенные c фигуры на холсте.

Мне нужно реализовать функциональность, которая позволяет мне перетаскивать эти фигуры, поэтому мне нужно изменить каждую конкретную c точку формы, удалив из них перетаскиваемую величину.

Итак, я решил, что при запуске события mousedown (которым является метод StartMove) я сохраню значения моих точек в переменной startValues , и когда я перемещаю мышь (перемещение метода), я затем обновляю значения, используя startValues ​​и расстояние между начальной точкой и текущим положением мыши, чтобы определить местоположение моей новой точки.

Проблема в том, что , this.startValues ​​фактически изменяется, чтобы соответствовать this.values ​​каждый раз, когда мой курсор перемещается, и я понятия не имею, почему . Что мне не хватает простого? а затем преобразовать обратно в значение. Я включил родительский класс Grf, чтобы вы могли видеть методы, которые меняют значения на позицию и позицию на значения.

Класс с проблемами 

class Test {
    constructor(grf){
        this.grf = grf; // Another class, which contains important methods
        this.values = []; 
        this.startValues = []; 
    }

    startMove(p0){ // p0 = [x,y]
        const {grf} = this;

        this.startValues = [...this.values]; //I also tried this.startValues = this.values
        this.p0 = p0;

        grf.canvas.addEventListener('mousemove',this.move);
        grf.canvas.addEventListener('mouseup', this.endMove);
    }

    move = (evt) => { // arrow function so 'this' is bound to Test class instead of grf.canvas
        
        const {grf, p0, values, startValues} = this;

        const coords = grf.canvas.getBoundingClientRect();
        const px = evt.clientX - coords.left;
        const py = evt.clientY - coords.top;

        for (let i = 0, iMax = this.values.length; i < iMax; i++){
            values[i][0] = grf.valX(grf.posX(startValues[0]) - (p0[0] - px));
            values[i][1] = grf.valY(grf.posY(startValues[1]) - (p0[1] - py));
        }

        console.log(this.startValues); // It changes to the same as this.values
    }

    endMove = (evt) => { // arrow function so 'this' is bound to Test class instead of grf.canvas
        const {grf} = this;
        grf.canvas.removeEventListener('mousemove',this.move);
        grf.canvas.removeEventListener('mouseup',this.endMove);
    }
}

Другой класс 

class Grf {
    constructor(canvas){ // Not the actual constructor, just an example of what the values could look like
        this.translateX = 1000;
        this.translateY = 1000;
        this.scaleY = 10.7;
        this.scaleX = 11.2;
        this.canvas = canvas;
    }

    posX (value){
        return (value-this.translateX)*this.scaleX;
    }

    posY (value){
        return (this.canvas.height-(100*(value))-this.translateY)*this.scaleY;
    };

    valX(pos){
        return (pos/this.scaleX) + this.translateX
    }

    valY(pos){
        return (-1)*((pos/this.scaleY) + this.translateY - this.canvas.height)/100
    }

}

1 Ответ

1 голос
/ 01 августа 2020

Как значения вставляются в startValues и values в классе Test? Вы, вероятно, вставляете один и тот же объект в оба, не копируя его, поэтому оба массива содержат одинаковые экземпляры.

Взгляните на пример: 

const obj = { a : 10 };
const a = [];
a.push(obj);
const b = [...a]; // creates new array, but with same objects
a[0].a = 20;
console.log(b[0]) // gives "{ a : 20 }"

Чтобы разделить его, вам нужно сделать копия объекта: 

a.push({...obj})
...