在Paper.js中调整矩形大小

Question

我在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; 

有一个尺度变换的方法，但它不是真正的鼠标交互和我的目标是创建一个把手，可以调整的组成部分。

Answer 1

您可以通过将您的矩形的预期宽度/高度与矩形的当前宽度/高度计算比例。

然后，您可以使用该比例“系数”来应用比例缩放。

基于上面的代码，您可以使用让您的矩形的电流宽度/高度：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) 

功能而这里的Sketch它。

请注意，上述功能也将重新定位元素在它的上一个位置，但它将使用左上角定位。 Paper.js使用元素的中心来定位它们，所以我正在澄清这一点，以免造成混淆。