标签: paperjs
Paper.js不会正确调整画布大小
我正在尝试Paper.js以获得乐趣,但似乎我已经陷入了困境.
添加resize="true"到canvas标记应该使元素与浏览器窗口一样高和宽.但是,这样做会导致一些相当奇怪的行为.
我希望画布在加载页面后立即调整到视口,但它没有这样做,这就是为什么我最初认为它根本没有调整大小.然而,实际发生的事情更加奇怪:画布的默认大小为300x150,当我调整视口大小时,它会慢慢增长 - 但是会无限期地增长.
为了记录,我尝试过使用data-paper-resize="true"或者只resize使用Chrome或者使用Chrome而不是Firefox - 但都无济于事.
如果这个问题是由我的一些令人费解的奇怪设置引起的,我不期待答案.但是,我想知道这个问题是否常见(或者甚至已知存在)并且已知原因和解决方案.
这是我正在使用的代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="paper-full.min.js"></script>
<script type="text/paperscript" canvas="myCanvas">
var path = new Path();
path.strokeColor = 'black';
path.moveTo(new Point(120, 120));
path.lineTo(new Point(500, 500));
</script>
</head>
<body>
<canvas id="myCanvas" style="border: 1px dotted red;" resize="true"></canvas>
</body>
</html>
推荐指数
解决办法
查看次数
HTML5 Canvas重绘循环性能优化
我们正在构建一个在浏览器中运行的CAD应用程序.
- CAD代表计算机辅助设计.
- Illustrator,CorelDraw,AutoCAD等是CAD应用程序的一些示例.
它基于Paper.js,这是一个非常简洁的Canvas库,允许您以编程方式操作矢量.
问题
我目前面临的主要问题是重绘循环性能.
重绘算法是"哑"(就聪明的黑客而言,以提高性能)因而效率低且速度慢 - 渲染场景图项依赖于逐渐减慢的重绘周期.
随着绘图点的累积,每个重绘周期变得越来越慢.
重绘方案非常简单:
- 清除整个区域
- 从场景图中获取所有项目
- 重新绘制所有项目.
这个问题
在这种情况下是否有任何课堂示例进行渲染优化 - 假设我不想实现脏矩形算法(仅绘制已更改的区域)
编辑:我已经尝试过手动的现场光栅化,效果非常好,我在下面发布了一个答案.
推荐指数
解决办法
查看次数
Paper.js通过拖动调整栅格/ TextItem /路径
推荐指数
解决办法
查看次数
paper.js如何仅使用javascript设置多个画布
我正在尝试在webapp中使用paper.js,但我无法让它与多个画布一起使用.就像画布在画布之间混淆一样,所以当我打算在画布1上画画时,它会出现在画布2上.
在每个视图中,我都是这样初始化文章:
this.mypaper = new paper.PaperScope();
this.mypaper.setup($("myCanvasId")[0]);
当我创建新的纸质对象时,我使用的是本地范围:
var circle = new this.mypaper.Path.Circle(10, 10, 5);
但是,当我在view1中创建一个圆时,它会在view2中绘制它.
我已经做了很多阅读,但我还没有找到如何设置多个论文镜或如何相互隔离视图的明确解释.
有谁知道如何正确使用paper.js多个画布？
编辑:我已经创建了一个jsFiddle来说明问题:http://jsfiddle.net/94RTX/1/
推荐指数
解决办法
查看次数
在Paper.js中适合页面缩放后,光栅图像偏离中心
我正在研究一个将raster(图像)放入的Paper.js应用程序view.然后它缩放以适合图像,以便一次可见所有图像.它主要是工作,但图像最终偏移,如下所示:
它看起来应该更像这样:
这是制作view图像,添加图像并调用缩放以适合的代码:
// Set up HTMLImage
var image = new Image(this.props.image.width, this.props.image.height);
image.src = 'data:image/png;base64,' + this.props.image.imageData;
//var canvas = React.findDOMNode(this.refs.canvas); // React 0.13 +
var canvas = this.refs.canvas.getDOMNode();
// Scale width based on scaled height; canvas height has been set to the height of the document (this.props.height)
var scalingFactor = canvas.height/image.height;
canvas.width = image.width * scalingFactor;
// Initialize Paper.js on the canvas
paper.setup(canvas);
// Add image to Paper.js canvas
var raster = …推荐指数
解决办法
查看次数
如何在 React 中使用 PaperJs？
我正在尝试在我的 React 组件之一中使用 PaperJs。我不确定在我的组件中在哪里使用 paper.view.onFrame 方法
推荐指数
解决办法
查看次数
推荐的方法来扩展Paper.js中的类
是否有推荐的方法来扩展Paper.js中的类？特别是,我有兴趣扩展Path
对不起,如果我的术语是不正确的,但我essentailly询问纸同样的问题正在被询问大约三在这里
推荐指数
解决办法
查看次数
Paper.js互操作性
我想从我的页面中的HTML按钮调用paper.js函数,但我相信paper.js函数存在于它们自己的范围内.paper.js文档提到互操作性,这听起来像是正确的直接然后带我到一个"即将推出"的页面:
http://paperjs.org/tutorials/getting-started/paperscript-interoperability/
有谁知道如何从我的HTML页面调用在paper.js脚本中创建的函数？
推荐指数
解决办法
查看次数
在服务器端实现Paper.js螺旋栅格示例
我试图在服务器上绘制一个螺旋栅格示例(链接)(运行Node.js).但是,我遇到的问题是我的路径没有显示在导出的帧上,我只能看到下载的图像.可能是我身边的一个愚蠢的错误,但是,通过谷歌和文档查看的日子并没有帮助我解决问题.
我做了什么:
- 添加
paper.前缀 - 将+/-更改为相应的
add()和subtract() - 尝试在图层中显示路径.
这是我的代码:
var paper = require('paper');
var fs = require('fs');
var drawer = {};
var canvas = new paper.Canvas(1000, 1000);
paper.setup(canvas);
var layer = paper.project.activeLayer;
drawer.drawSpiral = function(url, filename, fn) {
var url = 'http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png';
var raster = new paper.Raster(url);
raster.onLoad = function() {
raster.fitBounds(paper.view.bounds);
var position = paper.view.center;
var count = 0;
var max = Math.min(raster.bounds.width, raster.bounds.height) * 0.5;
var path = new paper.Path();
path.fillColor = 'black';
path.closed …推荐指数
解决办法
查看次数
以角度2安装paper.js和typings文件
我想在Angular 2中的一个组件中使用paper.js,但似乎无法使它工作.paper-full.js文件在加载组件时运行,但它从不识别画布.
有一个由Clark-Stevenson(paper.d.ts)为paper.js制作的打字文件,我认为这可能是问题的一部分,但是当我按照Ben Nadel的一般说明(见链接)尝试安装它时,我得到了以下:
C:\ Users\levi\Documents\Programming\AngularDesigner2> ./ node_modules/.bin/typingsinstall --global --save file:./ paper.d.ts
'' 不被识别为内部或外部命令,可操作程序或批处理文件.
https://github.com/clark-stevenson/paper.d.ts 我是paper.js,typescript和angular 2的新手.
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [ "es2015", "dom" ],
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
},
"files": [
"paper.d.ts"
]
}
App.component.ts
import { Component } from '@angular/core';
import '../../node_modules/paper/dist/docs/assets/js/paper.js';
@Component({
selector: 'my-app',
templateUrl: 'app/canvas.html'
})
export class AppComponent {
}
canvas.html
<h1>Canvas</h1>
<canvas id="canvas"></canvas>
paper.d.ts文件位于src:src/paper.d.ts下
推荐指数
解决办法
查看次数
标签 统计
paperjs ×10
javascript ×8
canvas ×2
raster ×2
angular ×1
html ×1
image ×1
interop ×1
mouseevent ×1
node.js ×1
optimization ×1
reactjs ×1
resize ×1
spiral ×1
typescript ×1
zooming ×1