Question

以下是代码：http://jsfiddle.net/MTDpC/

function drawArrow(firstShape, lastShape){

        var group = new Kinetic.Group();
        group.previousShape = firstShape;
        group.nextShape = lastShape;

        var beginX = group.previousShape.getX() + group.previousShape.getChildren()[0].getWidth() / 2;
        var beginY = group.previousShape.getY() + group.previousShape.getChildren()[0].getHeight();
        var endX = group.nextShape.getX() + group.nextShape.getChildren()[0].getWidth() / 2;
        var endY = group.nextShape.getY() - 8;

        var linha = new Kinetic.Line({
            points: [ beginX, beginY, endX, endY],
            name: 'linha',
            stroke: '#555',
            strokeWidth: 4,
            lineCap: 'butt'
        });

        var seta = new Kinetic.RegularPolygon({
            x: endX,
            y: endY,
            sides: 3,
            radius: 4,
            fill: '#555',
            stroke: '#555',
            strokeWidth: 4,
            name: 'seta'
        });
        seta.rotateDeg(180);

        group.add(seta);
        group.add(linha);

        firstShape.arrow = group;
        lastShape.arrow = group;

        group.reposition = function(){
            var beginX = this.previousShape.getX() + this.previousShape.getChildren()[0].getWidth() / 2;
            var beginY = this.previousShape.getY() + this.previousShape.getChildren()[0].getHeight();
            var endX = this.nextShape.getX() + this.nextShape.getChildren()[0].getWidth() / 2;
            var endY = this.nextShape.getY() - 8;
            this.get('.linha')[0].transitionTo({
                points:[ beginX, beginY, endX, endY],
                duration: 0.0000001,
            });

            this.get('.seta')[0].transitionTo({
                x: endX,
                y: endY,
                duration: 0.0000001,
            });
        };

        return group;
    }

    function getProcess (processText, x, y, width) {

        var group = new Kinetic.Group();

        var complexText = new Kinetic.Text({
            text: processText + '\nX: ' + x + '\nY: ' + y,
            fontSize: 12,
            fontFamily: 'Calibri',
            fill: '#555',
            padding: 20,
            align: 'center',
            name: 'Texto-Processo'
        });

        var rect = new Kinetic.Rect({
            stroke: '#555',
            strokeWidth: 5,
            fill: '#ddd',
            width: complexText.getWidth(),
            height: complexText.getHeight(),
            shadowColor: 'black',
            shadowBlur: 10,
            shadowOffset: [10, 10],
            shadowOpacity: 0.2,
            cornerRadius: 10,
            name: 'Quadro-Processo'
        });

        group.add(rect);
        group.add(complexText);

        group.setDraggable(true);
        group.on('mouseover', function() {
            document.body.style.cursor = 'pointer';
        });
        group.on('mouseout', function() {
            document.body.style.cursor = 'default';
        });     

        group.on('dragmove', function(){
            group.getChildren()[1].setText(this.customText + "\nX: " + this.getX() + "\nY: " + this.getY());
            group.arrow.reposition();
            group.arrow.draw();
        });


        group.setX(x);
        group.setY(y);
        group.customText = processText;
        return group;
    }
var stage = new Kinetic.Stage({
        container: 'container',
        width: 800,
        height: 600,
        id: 'myCanvas'
    });

    var layer = new Kinetic.Layer();

    var processo = getProcess('Processo de Teste de canvas 1', (stage.getWidth() / 2) - 100,  10 , 100);
    processo.setId('canvas1');
    layer.add(processo);

    var processo2 = getProcess('Processo de Teste de canvas 2', (stage.getWidth() / 2) -100, processo.getY() + 300, processo.getX());
    layer.add(processo2);

    layer.add(drawArrow(processo, processo2));

    // add the layer to the stage
    stage.add(layer);

当拖动其中一个框时，连接它们的箭头也会移动。由于箭头是使用2个形状制作的，我想知道是否有某种方法可以同时使用.transtionTo，因为当你移动底盒时，你可以看到线和形成箭头的三角形之间有一些延迟。

Answer 1

问题是transitionTo函数不支持转换点。此外，每次移动对象时，都会创建一个新的过渡对象......这非常慢。您不需要转换，转换仅在用户无意控制它们时自动设置动画。

请改为尝试：

    this.get('.linha')[0].setPoints([beginX, beginY, endX, endY]);
    this.get('.seta')[0].setPosition(endX,endY);
    this.getLayer().draw();
    /* this.get('.linha')[0].transitionTo({ //cant transition points
        points: [beginX, beginY, endX, endY],
        duration: 0.0000001,
    }); 

    this.get('.seta')[0].transitionTo({ // lags because everytime you move, a new transition is created, no this would be extremely slow
        x: endX,
        y: endY,
        duration: 0.0000001,
    });
    */

http://jsfiddle.net/MTDpC/1/

快速工作吗？

KineticJS - 如何一次转换2个形状？

1 个答案: