Блог

Допустим, у меня есть два объекта, программно сгенерированных с использованием трехмерного массива координат. Первым измерением является таблица «grid», вторым измерением является «строка» сетки, а третьим измерением является расположение столбца в этой строке. (Я упоминаю способ настройки массива только для любой информации, которая может оказаться полезной).

Используя цикл for и стандартные методы генерации регулярных полигонов с использованием библиотеки Kinetic, я создаю несколько треугольников в визуальной сетке. Каждый треугольник — это свой собственный объект, который я хочу анимировать независимо.

Моя проблема в следующем: если я хочу привязать анимацию к соседнему треугольнику, я не уверен в том, как указать, какие треугольники являются соседями треугольника ‘origin’ (без потенциального создания атрибута ‘grid ID’ внутри каждого объекта triangle и перекрестных ссылок с использованием собственного grid ID треугольника), а затем, как только объекты будут идентифицированы, переместите анимацию tween к его соседям.

Каждый треугольник имеет точно такое же имя в ссылке на память, поэтому вызов дочерней атрибутивной функции x triangle не будет работать, мне нужен способ получить объект по идентификатору или какому-либо другому атрибуту и заставить этот объект запустить свою функцию.

Вот пример одного из объектов Kinetic js:

             var tri = new Kinetic.RegularPolygon({
                x: x,
                y: y,
                sides: 3,
                radius: 15,
                rotation: z,
                fillRed: 17,
                fillGreen: 17,
                fillBlue: 17,
                closed: true,
                shadowColor: '#5febff',
                shadowBlur: 5,
                shadowOpacity: 0.18
            });
  

Я создаю сетку из отдельного массива следующим образом:

         function createTri(x, y, z) {
            var tri = new Kinetic.RegularPolygon({
                x: x,
                y: y,
                sides: 3,
                radius: 15,
                rotation: z,
                fillRed: 17,
                fillGreen: 17,
                fillBlue: 17,
                closed: true,
                shadowColor: '#5febff',
                shadowBlur: 5,
                shadowOpacity: 0.18
            });


            layer.add(tri);

        }

        for (var i = 0; i < pax.length; i  ){
            for (var j = 0; j < pax[i].length; j  ){
                createTri(pax[i][j][0],pax[i][j][1],pax[i][j][2]); //Reads the two coordinates and the orientation located in the grid based on index location and then calls the function createTri to create each triangle in the grid.
            };
        }
  

Если мне нужно будет подробнее объяснить свои намерения, я с радостью поясню.

Вы могли бы использовать simple.js и создавать объекты с отношениями, которые связывают их друг с другом.

например

 var Triangle = Simple.Model = function(options) {
  // add any attributes
  this.attributes = this.defaults || {};
}
  

И когда вы вызываете createTri,

 var tri = new Kinetic.RegularPolygon({ ... });

var obj = new Triangle();
obj.polygon = tri;
obj.neighbors = [];
  

Это просто подход, который я бы рассмотрел. Упрощает расширение, если вы хотите добавить больше функциональности объектам.