Question

我的问题是，那里有人设法像这样http://fabricjs.com/controls进行缩放/调整大小吗？

将感谢您的帮助或指导。

编辑：您会在链接中看到四边形，将它们拉出时，对象将朝该方向调整大小。例如，当我向右拉时，仅对象的右侧被扩展（换句话说，对象被水平缩放）。我正在寻找的行为是，当我在一侧拉物体时，它应该在该侧展开，并且当物体旋转一些时（例如，与x轴成20°角），我也想这样做

Answer 1

您必须聆听滑块更改事件，然后相应地更新商品尺寸。

这里是fiddle演示解决方案。

<!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>

在纸张js中调整大小/缩放控件，例如在fabric js中

1 个答案: