проблема с paperjs rotate - PullRequest
Новая
       24

проблема с paperjs rotate

0 голосов
/ 09 ноября 2018

Использование paperjs, если я вращаю p.view.rotate(update.deg);, работает нормально, без проблем.

Если я обновлю страницу и вызову вышеуказанную функцию p.view.rotate(update.deg); onload, то представление будет другим. отображается небольшой зум.

поворот изображения по умолчанию

enter image description here

После перезагрузки страницы я поворачиваю p.view с предыдущим значением. тогда это отображается как

enter image description here

Вот мой файл js

https://github.com/muralibobby35/annotateJs/blob/master/opentok-whiteboardnew.js

1 Ответ

0 голосов
/ 09 ноября 2018

Мне не удалось запустить ваш код, но я бы посоветовал для более простого сохранения состояния проекта использовать преобразования (масштабирование, вращение, ...) через слой, а не через представление.
Это позволит вам легко экспортировать / импортировать ваш проект без необходимости вручную восстанавливать состояние, вызывая view.rotate() подобные методы при перезагрузке окна.

Вот скрипка , демонстрирующая решение.
Он имитирует перезагрузку окна, экспортируя / импортируя проект из одного холста в другой пустой. 

<!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.5/paper-full.min.js"></script>
    <style>
        html,
        body {
            margin   : 0;
            overflow : hidden;
            height   : 100%;
        }

        main {
            display : flex;
            height  : 100vh;
        }

        canvas {
            flex   : 1;
            border : 1px solid;
        }
    </style>
</head>
<body>
<main>
    <canvas id="canvas1" resize></canvas>
    <canvas id="canvas2" resize></canvas>
</main>
<script type="text/paperscript" canvas="canvas1">
    // draw a square
    var rectangle = new Path.Rectangle({
        from: view.center - 50,
        to: view.center + 50,
        fillColor: 'orange'
    });

    // rotate layer rather than view so transformations are persisted when exporting
    project.activeLayer.rotate(30);

    // export datas and store them in global variable just for the demo, to simulate a page reload
    window.exportedDatas = project.exportJSON();
</script>
<script type="text/paperscript" canvas="canvas2">
    // import the exported datas
    project.importJSON(window.exportedDatas);

    // see that rotation is preserved
</script>
</body>
</html>
...