在Paper.js中调整矩形大小

蒂博尔·萨斯(Tibor Szasz)

我在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.widthrect.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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在 paper.js 中调整矩形“onResize”的大小

来自分类Dev

使用Paper.js重新调整大小

来自分类Dev

Paper.js无法正确调整画布的大小

来自分类Dev

使用paper.js进行自适应大小调整

来自分类Dev

paper.js赛道

来自分类Dev

在对话框中选择<paper-tab>时调整<paper-dialog>的大小

来自分类Dev

在边框中调整矩形大小

来自分类Dev

Paper.js Subraster添加在矩形后面而不是前面

来自分类Dev

如何在D3 JS中调整矩形大小

来自分类Dev

Paper.js矢量操作

来自分类Dev

带Webpack的Paper.js

来自分类Dev

Paper.js矢量操作

来自分类Dev

Paper.js - 导出光栅

来自分类Dev

飞镖中的Paper元素实例

来自分类Dev

Paper.js中的事件处理程序

来自分类Dev

在paper.js中更改帧速率

来自分类Dev

从Paper.js组中删除项目

来自分类Dev

Paper.js中的动画颜色

来自分类Dev

Paper.js中的事件处理程序

来自分类Dev

如何获得 paper.js 中的圆心?

来自分类Dev

检测 Paper JS 中的重叠对象

来自分类Dev

在边框窗格中调整矩形大小

来自分类Dev

以编程方式调整paper.js画布的大小:无法正确地重绘超出原始大小的一部分画布

来自分类Dev

Paper.js与Ember.js

来自分类Dev

如何从paper.js下载SVGSVGElement?

来自分类Dev

未定义Paper.js段

来自分类Dev

使用Paper.js补间动画

来自分类Dev

使用Paper.js检测当前旋转

来自分类Dev

Paper.js Subraster选择错误的区域