Question

如果我旋转<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <header class="entry-header"> <?php if ( is_singular() ) : the_title( '<h1 class="entry-title">', '</h1>' ); else : the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' ); endif; if ( 'post' === get_post_type() ) : ?> </header> <?php if ( has_post_thumbnail() ) { ?> <?php the_post_thumbnail( array( 750, 750 )); ?> <?php } ?> <?php endif; ?> <p class="article_date"><?php the_date(); ?></p> <div class="blogTextExc"> <?php the_content(); ?> Hello </div> <?php edit_post_link( 'Edit', '<div>', '</div>' ); ?> </article>，则使用paperjs可以正常工作，而不会出现问题。

如果刷新页面并调用上述函数p.view.rotate(update.deg); onload，则视图将不同。它显示了轻微的缩放。

默认图像旋转

重新加载页面后，我使用先前的值旋转p.view.rotate(update.deg);。然后显示为

这是我的js文件

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

Answer 1

我无法运行您的代码，但我建议，为了更容易地保存项目状态，建议您通过层而不是通过视图使用转换（缩放，旋转，...）。
这样一来，您就可以轻松地导出/导入项目，而不必像在窗口重新加载时那样调用view.rotate()之类的方法来手动恢复状态。

这里是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.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>

paperjs旋转的问题

1 个答案: