Элементы управления изменением размера / масштаба в бумаге js, как в ткани js - PullRequest
Новая
       9

Элементы управления изменением размера / масштаба в бумаге js, как в ткани js

0 голосов
/ 24 января 2019

мой вопрос, есть ли кто-то, кому удалось получить масштабирование / изменение размера, как это: http://fabricjs.com/controls но в бумажных js?

Буду признателен за помощь или указания, как это сделать.

РЕДАКТИРОВАТЬ: Вы видите квадратов в ссылке, когда вы тянете их, размер объекта в этом направлении. Например, когда я тяну правую сторону, тогда расширяется только правая сторона объекта (другими словами, объект масштабируется по горизонтали). Такое поведение, которое я ищу, когда я вытягиваю объект с одной стороны, он должен расширяться в эту сторону, и я также хочу сделать это, когда объект имеет некоторый поворот (например, на 20 ° от оси x)

1 Ответ

0 голосов
/ 25 января 2019

Вы должны прослушать событие смены ползунка, а затем соответствующим образом обновить размер элемента.

Вот скрипка , демонстрирующая решение. 

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

enter image description here

...