在 paper js 中像在 Fabric js 中一样调整大小/缩放控件

Question

我的问题是有人设法像这样进行缩放/调整大小：http://fabricjs.com/controls但是在纸质js中？

希望得到一些帮助或指导如何做到这一点。

编辑：您可以在链接中看到样方，当您拉动它们时，对象的大小会沿该方向变化。例如，当我拉动右侧时，只有对象的右侧会扩展（换句话说，对象会水平缩放）。我正在寻找的行为，当我在一侧拉动一个物体时，它应该在那一侧展开，并且当物体有一些旋转（例如，与 x 轴成 20°）时我也想这样做

Answer 1

您必须监听滑块更改事件，然后相应地更新您的项目大小。

这是一个演示解决方案的小提琴。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Debug Paper.js</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.8/paper-full.min.js"></script>
    <style>
        html,
        body {
            margin   : 0;
            overflow : hidden;
            height   : 100%;
        }

        canvas[resize] {
            width  : 100%;
            height : 100%;
        }

        div {
            position : fixed;
            top      : 15px;
            left     : 15px;
        }
    </style>
</head>
<body>
<canvas id="canvas" resize></canvas>
<div>
    <p>move the slider and see the circle scale change</p>
    <input type="range" min="1" max="5" step="0.5" value="1">
</div>
<script>
    // setup paper
    paper.setup('canvas');

    // draw a circle
    const circle = new paper.Path.Circle({
        center: paper.view.center,
        radius: 50,
        fillColor: 'orange',
        // make sure matrix is not applied so we can easily use scaling property
        applyMatrix: false
    });

    // on slider value change
    $('input').change(function() {
        const value = $(this).val();
        // update circle scale
        circle.scaling = value;
    });
</script>
</body>
</html>

在 paper js 中像在 Fabric js 中一样调整大小/缩放控件

问题描述投票：0回答：1

1个回答

最新问题

在 paper js 中像在 Fabric js 中一样调整大小/缩放控件

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1