我在Paper.js中创建了一个非常普通的矩形,我想调整其大小,但是我找不到任何明显的方法来实现它。
var rect = new Rectangle([0, 0],[width,height]);
rect.center = mousePoint;
var path = new Path.Rectangle(rect, 4);
path.fillColor = fillColor;
path.meta = fillColor;
有一种比例转换方法,但实际上并不是用于鼠标交互的,我的目标是创建一个可以调整组件大小的手柄。
您可以通过将矩形的预期宽度/高度除以矩形的当前宽度/高度来计算缩放比例。
然后,您可以使用该缩放比例“系数”来应用缩放比例。
基于上面的代码,您可以使用让您的矩形的电流宽度/高度:rect.bounds.width
及rect.bounds.height
这是您可以使用的功能
var rectangle = new Shape.Rectangle({
from: [0, 0],
to: [100, 50],
fillColor: 'red'
});
function resizeDimensions(elem,width,height){
//calc scale coefficients and store current position
var scaleX = width/elem.bounds.width;
var scaleY = height/elem.bounds.height;
var prevPos = new Point(elem.bounds.x,elem.bounds.y);
//apply calc scaling
elem.scale(scaleX,scaleY);
//reposition the elem to previous pos(scaling moves the elem so we reset it's position);
var newPos = prevPos + new Point(elem.bounds.width/2,elem.bounds.height/2);
elem.position = newPos;
}
resizeDimensions(rectangle,300,200)
这是它的草图。
请注意,上述函数还会将元素重新定位在其先前位置,但是它将使用左上角的位置。Paper.js使用元素的中心放置它们,因此我在澄清这一点,以免引起混淆
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句