我有一些文字添加到画布我正在缩放,当我缩放它时,文本不会停留在边界框中,而是移动到远低于或高于(取决于它的缩放程度)我想要获得我附上一些图片的文字留在边界框。
编辑:所有代码都已添加到底部
我有什么
我想要什么
所以基本上我希望边界框保持在文本中心,而不管曲线
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();