Изображение должно быть добавлено в группу перед добавлением группы в слой?

Я нахожу потенциальную ошибку в KonvaJS. Или я не уверен в возможностях ...

1) Создайте слой и добавьте его на сцену

2) Создайте группу и добавьте ее в слой

3) Создайте узел изображения и добавьте его в группу (обратите внимание, что мои изображения загружаются с помощью Konva.Image.fromURL, который ждет загрузки изображения, а затем добавляет его в группу.)

Результат: Изображение не появляется.

Но если вы добавляете изображение в группу, а затем добавляете группу в слой, изображение появляется. Это вызовет проблемы, если я хочу прикрепить изображение к динамической группе, если оно просто исчезнет.

Пытаюсь создать концепт подноса или тарелки. Где пользователь может размещать предметы на тарелке. Если пользователь перетаскивает пластину, он создает группу со всеми пересекающимися узлами и перемещает их все вместе. В конце перетаскивания он возвращает все объекты пользователю.

РЕДАКТИРОВАТЬ: проблема, с которой я столкнулся, была связана с координатами группы, как я упоминал в своем комментарии ниже.

«Я думаю, что долгое время неправильно понимал, как позиционирование работает с группами. Прочтите комментарии: jsfiddle.net/jusatx6s»

ЛЛ: Убедитесь, что вы проверяете положение узлов, которые вы визуализируете, и что они действительно отображаются на экране.


konvajs
person visc    schedule 17.05.2017    source источник
comment
Привет. Вы можете создать демо?   -  person lavrton    schedule 18.05.2017
comment
Я думаю, что долгое время неправильно понимал, как позиционирование работает с группами. Прочтите комментарии: jsfiddle.net/jusatx6s   -  person visc    schedule 18.05.2017
comment
Я сам не сталкивался с этой проблемой, поэтому интересно, согласно @jefhai, если вы устанавливаете (x, y) на изображении. Координаты в сгруппированных элементах могут сбивать с толку, поскольку исходная точка группы находится сверху и слева от самого верхнего левого элемента в группе. Попробуйте установить (x, y) на ноль и посмотрите, что у вас получится.   -  person Vanquished Wombat    schedule 23.05.2017
comment
Ниже я привел минимальный жизнеспособный пример, который выполняет то, что вы описываете. Не могли бы вы посмотреть, можете ли вы отредактировать его и сделать так, чтобы он не удался в соответствии с вашим случаем?   -  person Vanquished Wombat    schedule 23.05.2017

Ответы (2)


arrow_upward
2
arrow_downward

Я создал plunkr и выполнил шаги, которые вы упомянули. Все работает нормально. Вот мой код.

var width = window.innerWidth;
var height = window.innerHeight;
var stage = new Konva.Stage({
  container: 'container',
  width: width,
  height: height
});
// 1. created layer added it to stage.
var layer = new Konva.Layer();
stage.add(layer);
// 2. created group added it to layer
var group = new Konva.Group({
        x: 120,
        y: 40,
        rotation: 20
});

layer.add(group);
var src = 'https://konvajs.github.io/assets/yoda.jpg';
// 3. Create an Image node and add it to group
Konva.Image.fromURL(src, function(yoda) {
  console.log(yoda);
  yoda.setAttrs({
    x: 50,
    y: 50,
    width: 106,
    height: 118
  });
  // 4. Add it to group.
  group.add(yoda);
  layer.batchDraw(); // It's required to draw changes.
});

Вот plnkr, с которым можно поиграть. Пожалуйста, дайте мне знать, если я что-то пропустил.

person Hitesh Kumar    schedule 21.05.2017
comment
Что делает batchDraw();? Я не могу найти его в документации API в разделе Layer. - person visc; 21.05.2017
comment
Спасибо, это действительно очень полезно для меня. - person visc; 24.05.2017

arrow_upward
0
arrow_downward

Отредактировано в свете путаницы редактирования OP по поводу координат.

Принципы:

  1. слои используют ту же систему координат, что и сцена. Таким образом, установка позиции формы на {X: 10, y: 20} находится на 10,20 по отношению к левому верхнему краю сцены.

  2. Добавление фигуры в группу отличается, но вы не заметите этого, если не установите положение группы по осям x и y. Для фигур, которые добавляются в группу, положения фигур ДОБАВЛЯЮТСЯ к положениям родительской группы.

Вот пример использования слоя и группы. Золотой прямоугольник находится только на слое. Группа обозначена зеленым прямоугольником и установлена ​​в положение (60, 50). Красный прямоугольник - это копия золотого прямоугольника, за исключением цвета. У него такое же положение по осям x и y, что и у красного, НО он добавляется в группу. Таким образом, его позиция (5, 5) добавляется к позиции группы (60, 50), чтобы получить ее абсолютное положение на сцене как (65, 55).

// add a stage
var s = new Konva.Stage({
  container: 'container',
  width: 400,
  height: 400
});

// add a layer        
var l = new Konva.Layer();
s.add(l);

// Add a gold rect to the LAYER
var gold = new Konva.Rect({stroke: 'gold', width: 40, height: 50, x: 5, y: 5});
l.add(gold);

// add a group
var g = new Konva.Group({x:60, y:50});
l.add(g);

// Add a green rect to the LAYER then add to the group
var green = new Konva.Rect({stroke: 'lime', width:100, height: 100, x: 0, y: 0});
g.add(green);

// Add a red rect, same apparent co-ords as red, but this time to the group
var red = new Konva.Rect({stroke: 'red', width: 40, height: 50, x: 5, y: 5});
g.add(red);

var abspos = red.getAbsolutePosition();
var pos = red.position();
console.log('Abs position of red is (' + abspos.x + ', ' + abspos.y + ') but its co-ords are ' + '(' + pos.x + ', ' + pos.y + ')'); 
  l.draw(); // redraw the layer it all sits on.
#container {
  border: 1px solid #ccc;
}
<script src="https://cdn.rawgit.com/konvajs/konva/1.6.2/konva.min.js"></script>


<body>
  <div id="container"></div>
</body>

person Vanquished Wombat    schedule 23.05.2017
comment
Спасибо за добавленный пример. Моя проблема в конечном итоге была связана с тем, как работают групповые координаты. Я понял это и отредактировал исходный вопрос. - person visc; 24.05.2017
comment
@jefhai Извините, я видел этот комментарий, но не связал его с вами. У меня тоже было несколько начальных недоразумений с группами. Я закончил тем, что добавил к группе невидимый фоновый прямоугольник, размер которого равен размеру сцены, что дало мне групповые координаты, соответствующие странице. - person Vanquished Wombat; 24.05.2017