KonvaJS - Не обновлять трансформатор после group.clip () - PullRequest
Новая
       53

KonvaJS - Не обновлять трансформатор после group.clip ()

2 голосов
/ 08 октября 2019

О проблеме

Я работаю над графическим редактором, созданным с konva.js
После нескольких часов исследований я не могу получить преобразователь чтобы настроить подрезанный размер группы

Подробности

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

Хорошо работает обрезанная группа;однако это приложение является динамическим, поэтому для ввода области клипа требуется ввод от пользователя. Когда я вызываю group.clip() и layer.batchDraw(), он выполняет отсечение, но ограничивающий прямоугольник (преобразователь) не обновляется, даже после того, как я вызываю transformer.forceUpdate(), не повезло.

То, что я пробовал

Когда я destroy преобразователь и воссоздать его, он по-прежнему указывает на полноразмерный (не обрезанный размер), а обрезанная область все еще остается.

Вот экранснимок для ясности: Screenshot-20191008-153503.png

Некоторый код

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

let grp = new Konva.Group({x:o.x,y:o.y,draggable:o.draggable,clip:{x:0,y:0,width:o.width,height:o.height}});

Любой другой код, который я вставлю сюда, просто сбьет с толку нас всех, это ОЧЕНЬ много, и я знаю, что люди бегут, когда видят это, поэтомуЕсли я добавлю больше кода, пожалуйста, дайте мне знать в комментариях?

Буду признателен за любую помощь, спасибо.

Ответы [ 2 ]

1 голос
/ 10 октября 2019

Хотя ответ lavtron может работать, более прямой подход решает проблему:

Исправление ошибки 

(function()
{
    let func = Konva.Group.prototype.getClientRect;
    let orig = {enumerable:false, configurable:false, writable:false, value:func};
    let altr = {enumerable:false, configurable:false, writable:false, value:function(t)
    {
        let attr = this.attrs;
        let resl = this.getOrigClientRect(t);
        if(attr.hasOwnProperty('clipWidth')){resl.width=attr.clipWidth};
        if(attr.hasOwnProperty('clipHeight')){resl.height=attr.clipHeight};
        return resl;
    }};
    Object.defineProperty(Konva.Group.prototype,'getOrigClientRect', orig);
    Object.defineProperty(Konva.Group.prototype,'getClientRect', altr);
})();


Как реализовать

Чтобы реализовать этот патч:

  • либо добавьте его в свой собственный JavaScript - после скрипта konva.js, загруженного в DOM,
  • иливставьте это непосредственно в исходный код konva.js

Если вы используете RequireJS для загрузки KonvaJS, вы должны соответствующим образом назвать импортируемый объект и / или обновить приведенный выше код, -ИЛИ- просто сохраняйтеэто как Konva (обратите внимание на прописную букву K).

Технические подробности

Работает с использованием оригинального результата метода getClientRect и обновляет его только с clipWidth и clipHeight из вырезанной группыесли у него есть эти атрибуты;иначе он возвращает результат без изменений.

Это проверено и работает хорошо;однако было бы лучше, если бы исходный код дистрибутива репозитория konva.js мог быть соответствующим образом обновлен.

1 голос
/ 08 октября 2019

К сожалению, на текущий момент с konva@4.0.13, Konva.Transformer не поддерживает отсечение. Он просто не знает об этом, поэтому вы видите его в «старом» месте.

Хитрый обходной путь:

  1. Создайте прозрачный прямоугольник с размером области обрезки
  2. Присоедините Konva.Transformer к этому прямоугольнику.
  3. В случае transform или transformend события изменяют размер группы или ее потомков вручную.
...