如何在缩放期间将fabricjs边界框锁定到组

时间:2015-12-12 17:34:22

标签: javascript canvas html5-canvas fabricjs bounding-box

我有一些文字添加到画布我正在缩放,当我缩放它时,文本不会停留在边界框中,而是移动到远低于或高于(取决于它的缩放程度)我想要获得我附上一些图片的文字留在边界框。

编辑:所有代码都已添加到底部

我有什么

what i have

我想要什么

what i want

所以基本上我希望边界框保持在文本中心,而不管曲线

PS。所有字母都通过新的fabric.Text添加到组中,如果重要的话,在for循环中 也忽略了单词的曲线

   var group = new fabric.Group([],{
        centeredRotation: true,
        centeredScaling: true,
        top: 150,
        left: 150,
        height: 250,
        width: textWidth,
        angle: 0,
        // padding: -50
        // adjustPosition: 'center'
    });
    // for each character
    for (var i = 0; i < text.length; i += 1) {  
        // get the angular width of the text ++ added the scope spacing as well to eventually dynamically change the spacing of the letters
        aw = ctx.measureText(text[i]).width * pA + ($scope.spacing/1000);
        var xDx = Math.cos(a + aw / 2); // get the yAxies vector from the center x,y out
        var xDy = Math.sin(a + aw / 2);
        // is the text upside down. If it is flip it
        if (xDy < 0) {  
            // sets the transform for each character scaling width if needed
            transform = [-xDy * wScale, xDx * wScale,-xDx,-xDy, xDx * radius + x,xDy * radius + y];

        }else{
            transform = [-xDy * wScale, xDx * wScale, xDx, xDy, xDx * radius + x, xDy * radius + y];

        }


        if($scope.flipText === false){
            var letter = new fabric.Text(text[i],{
                id: 'letter',
                top: -180,
                left: -180,
                transformMatrix: [-xDy * wScale, xDx * wScale,-xDx,-xDy, xDx * radius + x,xDy * radius + y]
            });
        } else if($scope.flipText === true){
            var letter = new fabric.Text(text[i],{
                id: 'letter',
                top: -180,
                left: -180,
                transformMatrix: [-xDy * wScale, xDx * wScale, xDx, xDy, xDx * radius + x, xDy * radius + y]
            });
        }



        a += aw;

        group.add(letter);
        group.add(circle);
    }

    canvas.add(group);
    group.centerH();

0 个答案:

没有答案