Проблема изменения размера формы после использования кэширования и фильтра - PullRequest
Новая
       17

Проблема изменения размера формы после использования кэширования и фильтра

0 голосов
/ 16 марта 2020

Подробная информация о проекте

на основе node.js использование vue. js / javascript конво для vue

Projekt Рабочий процесс

Проект включает в себя этап со слоями и формами в нем. Пользователь может загружать изображения, которые затем отображаются в Konva. Если пользователь запускает событие двойного щелчка на изображении, новый прямоугольник создается и помещается поверх изображения (связывается с изображением) для масштабирования изображения без масштабирования по размеру, только изображение в фоновом режиме (Zoom). Пока все хорошо.

Проблема

Когда у меня есть кнопка для установки фильтра на выбранный элемент / изображение Konva, например: 

selectedNode.cache();
selectedNode.filters([Konva.Filters.Sepia]);
selectedNode.batchDraw();

После этого я не могу изменить масштаб изображения с помощью прямоугольника масштаба. Я прочитал кэш, преобразовывающий элемент konva в изображение, и после этого невозможно изменить его размер снова.

Есть ли способ дешифровать изображение после применения фильтра? Чтобы его можно было снова масштабировать в Konvas?

Здесь я создаю форму : 

imageObj.onload = function() {

    ...

    clip = new Konva.Circle({
      id: 'clip_'+vm.anzClip,
      name: selectedNode.attrs.name,
      radius: max_size,
      x: selectedNode.attrs.x + max_size * selectedNode.attrs.scaleX,
      y: selectedNode.attrs.y + max_size * selectedNode.attrs.scaleY,
      draggable: true,
      uploadCutText: this.selectImgToolboxTextareaText,
      gravur: tempgrav,
      scaleX: selectedNode.attrs.scaleX,
      scaleY: selectedNode.attrs.scaleY,
      rotation: selectedNode.attrs.rotation,
      formType: 'circle',

      fillPatternImage: selectedNode.attrs.image,
      fillPatternOffset: { 
        x: max_size / patternScaleX, 
        y:  max_size / patternScaleY},
      fillPatternRepeat: 'no-repeat',
      fillPatternRotation: 0,
      fillPatternScale: {
        x:patternScaleX,
        y:patternScaleY,
      },
      dataScale: patternScaleX * selectedNode.attrs.scaleX,              
    });

      ...
      layer.add(clip);
      transformerNode.attachTo(clip);
      ...

Событие двойного щелчка для изменения масштаба изображения с наложением Rect: 

clip.on('dblclick', function(e){


    transformerNode.attrs.enabledAnchors = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];

        var selectedNode = e.target;

        if(typeof( selectedNode ) !== 'undefined'){

        if(Number.isNaN(selectedNode.attrs.fillPatternOffsetX) ){
            selectedNode.attrs.fillPatternOffsetX = 0;
        }
        if(Number.isNaN(selectedNode.attrs.fillPatternOffsetY) ){
            selectedNode.attrs.fillPatternOffsetY = 0;
        }

        let degto = 3.141592654 / 180;
        let sinr = Math.cos( selectedNode.attrs.rotation * degto) ;
        let cosr = Math.sin( selectedNode.attrs.rotation * degto );


        if (sinr > 1){
            sinr = 1;
        } else if( sinr < -1) {
            sinr = -1;
        } else if( sinr < 0 && sinr > -0.1) {
            sinr = 0;
        } else if( sinr > 0 && sinr < 0.1) {
            sinr = 0;
        }


        let xpart = 0;
        let xpartfill = 0;
        let ypart = 0;
        let width = 0;
        let height = 0;
        let xme = 1;
        let yme = 1;
        let scaleCenter = true;
        let setFillPatternScaleX = 1;
        let setFillPatternScaleY = 1;



        if(selectedNode.getClassName() === 'Rect'){

            console.log('clip.on(dblclick -> rect');


            width = selectedNode.attrs.width;
            height = selectedNode.attrs.height;

            xme = selectedNode.attrs.x 
            - selectedNode.attrs.fillPatternOffsetX * sinr * selectedNode.attrs.scaleX * selectedNode.attrs.fillPatternScaleX
            + selectedNode.attrs.fillPatternOffsetY * cosr * selectedNode.attrs.scaleY * selectedNode.attrs.fillPatternScaleY;
            yme = selectedNode.attrs.y 
            - selectedNode.attrs.fillPatternOffsetY * sinr * selectedNode.attrs.scaleY * selectedNode.attrs.fillPatternScaleY
            - selectedNode.attrs.fillPatternOffsetX * cosr * selectedNode.attrs.scaleX * selectedNode.attrs.fillPatternScaleX;
            scaleCenter = false;

            setFillPatternScaleX = 1;
            setFillPatternScaleY = 1;

        } 
        else {               

            console.log('clip.on(dblclick -> cirlce');

            width = selectedNode.attrs.radius * 2;
            height = selectedNode.attrs.radius * 2;
            xme = selectedNode.attrs.x 
            - selectedNode.attrs.fillPatternOffsetX * sinr * selectedNode.attrs.fillPatternScaleX * selectedNode.attrs.scaleX
            + selectedNode.attrs.fillPatternOffsetY * cosr * selectedNode.attrs.fillPatternScaleX * selectedNode.attrs.scaleX
            ;

            yme = selectedNode.attrs.y 
            - selectedNode.attrs.fillPatternOffsetY * sinr * selectedNode.attrs.fillPatternScaleY * selectedNode.attrs.scaleY
            - selectedNode.attrs.fillPatternOffsetX * cosr * selectedNode.attrs.fillPatternScaleY * selectedNode.attrs.scaleY
            ;
            scaleCenter = true;

            setFillPatternScaleX = selectedNode.attrs.fillPatternScaleX;
            setFillPatternScaleY = selectedNode.attrs.fillPatternScaleY;
        }

        let startx=0;
        let starty=0;


        // special - trans
        var rect = new Konva.Rect({
            id: 'special_trans',
            name: 'special_trans',
            width: selectedNode.attrs.fillPatternImage.width * selectedNode.attrs.scaleX,
            height: selectedNode.attrs.fillPatternImage.height * selectedNode.attrs.scaleY,
            x: xme,
            y: yme,
            // + max_size * selectedNode.attrs.scaleY,
            scaleX:selectedNode.attrs.fillPatternScaleX,
            scaleY:selectedNode.attrs.fillPatternScaleY,
            rotation:selectedNode.attrs.rotation,
            fillPatternOffsetX: 0,
            fillPatternOffsetY: 0,
            fillPatternScaleX: 1,
            fillPatternScaleY: 1,

            fill: 'red',
            stroke: 'black',
            strokeWidth: 0,
            opacity:.5,
            draggable: true,
            centeredScaling: scaleCenter,

        });


        layer.add(rect);                  
        layer.batchDraw();

        transformerNode.detach();
        transformerNode.attachTo(rect);    
        transformerNode.rotateEnabled(false);
        transformerNode.centeredScaling(true);


        let changeNodeName = 'clip_'+vm.anzClip;    
        vm.changeNode = selectedNode;


        rect.on('transform', function(e){    
            const { selectedShapeName } = vm;
            const selectedNode = stage.findOne('.' + selectedShapeName);

            e.currentTarget.attrs.rotation = selectedNode.attrs.rotation;
            e.currentTarget.attrs.fillPatternScaleX = setFillPatternScaleX;
            e.currentTarget.attrs.fillPatternScaleY = setFillPatternScaleY;
            vm.changeNode.attrs.fillPatternScaleX = e.currentTarget.attrs.scaleX;
            vm.changeNode.attrs.fillPatternScaleY = e.currentTarget.attrs.scaleY;    

            vm.changeNode.attrs.dataScale = vm.changeNode.attrs.dataScale;              
            layer.batchDraw();              

        });



        rect.on('dragmove', function(e){

            let xx = ( 
            - e.target.attrs.x / vm.changeNode.attrs.fillPatternScaleX 
            + vm.changeNode.attrs.x / vm.changeNode.attrs.fillPatternScaleX ) / vm.changeNode.attrs.scaleX;

            let yy = ( - e.target.attrs.y / vm.changeNode.attrs.fillPatternScaleY + vm.changeNode.attrs.y / vm.changeNode.attrs.fillPatternScaleY ) / vm.changeNode.attrs.scaleY;
            let degto = 3.141592654 / 180;
            let sinr = Math.cos( vm.changeNode.attrs.rotation * degto) ;
            let cosr = Math.sin(vm.changeNode.attrs.rotation * degto );

            if(vm.changeNode.attrs.rotation < 0){
            sinr = sinr;
            cosr = - cosr;

            vm.changeNode.attrs.fillPatternOffsetX =  xx * sinr - yy * cosr;  
            vm.changeNode.attrs.fillPatternOffsetY =  xx * cosr + yy * sinr;

            }else if (vm.changeNode.attrs.rotation < 90){
            sinr = sinr;
            cosr = cosr;

            vm.changeNode.attrs.fillPatternOffsetX = xx * sinr + yy * cosr;
            vm.changeNode.attrs.fillPatternOffsetY = yy * sinr - xx * cosr;

            }else if (vm.changeNode.attrs.rotation < 180){
            sinr = sinr;
            cosr = - cosr;

            vm.changeNode.attrs.fillPatternOffsetX =  xx * sinr - yy * cosr;
            vm.changeNode.attrs.fillPatternOffsetY =  xx * cosr + yy * sinr;

            }else{
            sinr = sinr;
            cosr = - cosr;

            vm.changeNode.attrs.fillPatternOffsetX =  xx * sinr + yy * cosr;
            vm.changeNode.attrs.fillPatternOffsetY =  xx * cosr - yy * sinr;

            }

            // transformerNode.parent Same OK


            vm.$nextTick(function(){
            transformerNode.parent.batchDraw();
            layer.batchDraw();
            });


        ...
...