paperjs 旋转的问题 [英] issue with paperjs rotate
问题描述
使用 paperjs 如果我旋转 p.view.rotate(update.deg); 它工作正常，没有问题.
Using paperjs if I rotate p.view.rotate(update.deg); it is working fine with out issue.
如果我刷新页面并调用上面的函数 p.view.rotate(update.deg); onload 那么视图就不同了.它显示轻微的缩放.
If I refresh the page and call the above function p.view.rotate(update.deg); onload then the view is different. it is displaying a slight zoom.
默认图像旋转
重新加载页面后，我使用以前的值旋转 p.view.然后它显示为
After reloading the page I am rotating p.view with the previous value. then it is displaying as
这是我的js文件
https://github.com/muralibobby35/annotateJs/blob/master/opentok-whiteboardnew.js
推荐答案
我无法运行您的代码，但为了更轻松地保存项目状态，我建议您使用转换(缩放、旋转...)通过层而不是通过视图.
这将允许您轻松导出/导入您的项目，而无需通过调用 view.rotate() 类似窗口重新加载的方法来手动恢复状态.
I was not able to run your code but I would suggest, for an easier project state preservation, that you use transformations (scale, rotation, ...) through layer rather than through view.
That would allow you to easily export/import your project whithout having to manually restore state by calling view.rotate() like methods on window reload.
这是演示解决方案的fiddle.
它通过将项目从一个画布导出/导入到另一个空白画布来模拟窗口重新加载.
Here is a fiddle demonstrating the solution.
It simulates window reload by exporting/importing a project from one canvas to another empty one.
<!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 旋转的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
