小编tec*_*h-e的帖子

如何在画布中缩放旋转的矩形

当形状旋转时,用于通过角手柄缩放矩形的正确数学公式是什么?

更新:

问题更多地是关于手柄上的鼠标按下事件背后的数学原理以及形状的实际大小。当手柄在旋转形状上移动时,用于计算形状位置和缩放大小的适当数学是什么?

我创建了一个项目的小提琴来展示一个例子:https : //jsfiddle.net/8b5zLupf/38/

小提琴中画布上的灰色形状可以移动和缩放,但由于形状已旋转,因此缩放形状并在缩放时保持形状位置的数学计算不正确。

项目将缩放,但不会通过相反的点锁定形状并均匀缩放。

我用来缩放具有方面的形状的代码区域如下:

resizeShapeWithAspect: function(currentHandle, shape, mouse)
{
    var self = this;
    var getModifyAspect = function(max, min, value)
    {
        var ratio = max / min;
        return value * ratio;
    };

    var modify = {
        width: 0,
        height: 10
    };
    var direction = null,
        objPos = shape.position,
        ratio = this.getAspect(shape.width, shape.height);
    switch (currentHandle)
    {
        case 'topleft':
            modify.width = shape.width + (objPos.x - mouse.x);
            modify.height = shape.height + (objPos.y - mouse.y);

            this.scale(shape, modify);

            /* we …
Run Code Online (Sandbox Code Playgroud)

javascript math canvas scale

2
推荐指数
1
解决办法
1902
查看次数

标签 统计

canvas ×1

javascript ×1

math ×1

scale ×1