在Paper.js中调整矩形大小 [英] Resize rectangle in Paper.js

问题描述

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

有一种比例转换方法，但并不是真正用于鼠标交互，我的目标是创建一个手柄

解决方案

您可以通过将预期宽度/高度相除来计算缩放比例矩形的当前宽度/高度。

然后，您可以使用该缩放比例系数来应用缩放比例。 / p>

根据上面的代码，您可以使用以下方法获取矩形的当前宽度/高度： rect.bounds.width 和 rect.bounds.height

这是您可以使用的功能

 可变矩形= new Shape.Rectangle（{
 from：[0，0]，
 to：[100，50]，
 fillColor：'red'
}）; 
 
 
函数resizeDimensions（elem，width，height）{
 //计算比例系数并存储当前位置
 var scaleX = width / elem.bounds.width; 
 var scaleY = height / elem.bounds.height; 
 var prevPos = new Point（elem.bounds.x，elem.bounds.y）; 
 
 //应用计算比例缩放
 elem.scale（scaleX，scaleY）; 
 
 //将元素重新定位到先前的位置（缩放会移动元素，因此我们将其重置）； 
 var newPos = prevPos +新Point（elem.bounds.width / 2，elem.bounds.height / 2）; 
 elem.position = newPos; 
} 
 
 
 resizeDimensions（rectangle，300,200）
  

而这里的素描

请注意，上面的函数还会重新定位元素到其先前位置，但它将使用左上角的位置。 Paper.js使用元素的中心放置它们，因此我在澄清这一点，以免引起混淆

I have a very ordinary rectangle created in Paper.js and I'd like to resize it, but I can't find any obvious ways to do it.

var rect = new Rectangle([0, 0],[width,height]);
rect.center = mousePoint;
var path = new Path.Rectangle(rect, 4);
path.fillColor = fillColor;
path.meta = fillColor;

There's a scale transformation method, but it's not really for mouse interaction and my goal is to create a handle that can resize a component.

解决方案

You can calculate the scaling by dividing the intended width/height of your rectangle with the current width/height of your rectangle.

Then you can use that scaling 'coefficient' to apply the scaling.

Based on your code above, you can get the current width/height of your rectangle by using: rect.bounds.width and rect.bounds.height

Here's a function you can use

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)

And here's the Sketch for it.

Be aware that the above function will also reposition the element at it's previous position but it will use top-left positioning. Paper.js uses the element's center to position them so I'm clarifying this so it doesn't cause confusion

这篇关于在Paper.js中调整矩形大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！