标签: paperjs

我想从我的页面中的HTML按钮调用paper.js函数,但我相信paper.js函数存在于它们自己的范围内.paper.js文档提到互操作性,这听起来像是正确的直接然后带我到一个"即将推出"的页面:

http://paperjs.org/tutorials/getting-started/paperscript-interoperability/

有谁知道如何从我的HTML页面调用在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 …

我想在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://www.bennadel.com/blog/3169-adding-custom-typings-files-d-ts-in-an-angular-2-typescript-application.htm

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下

我想使用paper.js,但有3个不同版本的paper.js,我无法找到它的差异的解释.我用哪一个？

来自paper.js的dist目录:

• 纸core.js
• 纸full.js
• paper.js

实际上,有一个四,paper-node.js但我认为这对Node.js的这我不使用的时刻.

我是Paper.js的新手,在阅读教程时,我对事件系统感到疑惑.这就是教程中描述的事件处理方式:

var path;
function onMouseDown(event) {
    // Create a path:
    path = new Path();
    path.strokeColor = 'black';
    // Add the mouse down position:
    path.add(event.point);
}

function onMouseUp(event) {
    // Add the mouse up position:
    path.add(event.point);
}

所以,它只是在全局命名空间中的功能...
最后我有一些关于它的问题,我没有在互联网上找到任何东西:
- 如何将事件处理程序绑定到特定的画布？
- 如何将事件处理程序绑定到特定的"对象"(栅格图像,矩形等)？
- 如何绑定多个事件处理程序？

我们的想法是在简单的画布游戏开发中使用Angular.从理论上讲,该项目应该从更系统,可管理和可扩展的方面受益.这不是精灵/瓷砖/碰撞游戏,PaperJS用于进行大多数画布绘制和交互.

1. 将Paper.js(或其他画布绘图库)集成到多个NG视图中的最佳方法是什么,以使每个视图代表一个游戏阶段？
2. 是否可以设置一次纸张并在多个视图中使用纸张？
3. 该游戏允许用户重新访问之前的阶段/视图.每次视图/画布加载时我是否必须重新设置Paper？(如下图所示,如果仅在视图第二次访问时出现空白画布,则设置一次)
4. 如何在视图之间传输Paper js信息？例如,捕获视图1中的用户绘图,并在视图3中显示绘图.

背景:

纸JS

我正在开发一个项目来创建一个包含4个阶段的简单画布游戏.我决定使用PaperJS来绘制和动画形状.每个阶段的内容和ui保存在同一论文项目的单独层中.

Angular JS

随着游戏的发展,游戏变得越来越复杂.经过一些研究,我决定使用Angular组织整个游戏,虽然我是Angular的新手.计划:

• 4个游戏阶段分为四个视图,每个视图都有自己的画布
• 自定义指令用于在每个画布上设置纸张
• 使用服务进行画布之间的沟通.例如,允许用户在第一阶段绘制并在第二阶段显示绘图

我在plunker中做了一个模拟,用Paper.js显示基本的设置和动画.每个画布都位于单独的视图中,并启用了路由.

Plunker演示:http://plnkr.co/edit/Um1jTp8xTmAzVEdzk2Oq?p=preview

为了测试,我做了

paper.project.layers[0].children

随时可见.设置完纸张后,触发"添加形状"按钮会按预期将子项引入活动层.

问题1(演示中的Draw1)

在DRAW1中,当视图首次加载时,纸张仅在画布上设置一次:

drawControllers.directive('drawingBoard',['drawService',function(drawService){

function link(scope, element, attrs){

    // setup Paper

    var canvas = element[0];

    if ( scope.objectValue.count < 1){

        paper = new paper.PaperScope();
        paper.setup(canvas);
        scope.setCount( scope.objectValue.count + 1 );

        with (paper) {

            var shape = new Shape.Circle(new Point(200, 200), 200);
                shape.strokeColor = 'black';
                shape.fillColor = 'yellow';

            // Display data in canvas
            var text = new PointText(new Point(20, 20));
                text.justification …

我发现当canvas元素位于react组件内时,canvas元素会在窗口调整大小时正确调整大小.与PaperJS一起使用时,它们也可以正确调整大小.但是,与PaperJS和ReactJS一起使用时,它们不会调整大小.

这是PaperJS和ReactJS之间的不兼容还是我错误地实例化PaperJS？我在包含canvas元素的react组件的componentDidMount函数中调用paper.setup(canvas).这是正确的地方吗？

我在下面列出了代码段.

注意:出于某种原因,"运行代码片段"功能会在ReactJS代码段上出现问题,因此我已经包含了JSFiddle链接,它们可以正常工作.

PaperJS Only [SUCCESS] - Canvas在窗口调整大小时调整大小 https://jsfiddle.net/eadlam/srmracev/

// Instantiate the paperScope with the canvas element
var myCanvas = document.getElementById('myCanvas');
paper.setup(myCanvas);

// Draw a circle in the center
var width = paper.view.size.width;
var height = paper.view.size.height;
var circle = new paper.Shape.Circle({
  center: [width / 2, height / 2],
  fillColor: 'grey',
  radius: 10
});

// render
paper.view.draw();

canvas {
  width: 100%;
  height: 100%;
  border: solid 1px red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.9.22/paper-core.min.js"></script>
<canvas id="myCanvas" resize="true"></canvas>

ReactJS Only …

我正在创建一个Web应用程序,它使用Paper.js来处理通过SVG导入的向量.直到最近,一切都运作良好.然后,突然之间,onMouseDown事件停止被触发,即使onKeyDown和onMouseMove触发就好了.

我创建一个Tool对象的实例,如下所示:

paper.setup("canvas");
var tool = new paper.Tool();
tool.activate();

然后我在代码中绑定事件,如下所示:

tool.onMouseDown = function (event) {
  console.log("Mouse down triggered!");
}
tool.onMouseMove = function (event) {
  console.log("Mouse move triggered!");
};

由于某种原因,后者确实触发,但前者没有触发.其他事件如onKeyDown和onKeyUp也会触发,但onMouseDown和onMouseDrag不会执行任何操作.有谁知道是什么原因造成的？我也使用jQuery和jQueryUI,可能会导致某种干扰？

我在一个项目中使用了Paper.js的Bower包.我正在使用Gulp为浏览器准备项目.但是,有些字符在bower_components/paper/dist/paper-full.min.js中看起来像这样:

\xaa\xb5\xba\xc0-\xd6\xd8-\xf6\xf8-\u02c1\u02c6-\u02d1\u02e0-\u02e4\u02ec...

通过Gulp之后最终会像这样结束:

ªµºÀ-ÖØ-öø-?ˆ-??-????-????-???-???-??-??-??-??-???-??-??-??-??...

导致控制台错误

未捕获的SyntaxError:无效的正则表达式:/ [ªÂÂÂÂÂÂÂÂÂÃÂ-Ã-Ã-Ã-Ãø-ˈ-Ë'Ë-ËËËËËËÍÍÍÍÍÍÍÍÍÍÍÎÎÎΠΊΌΎ-Ρ[更多奇怪的字符]字符类中的范围乱序

这是我的gulp文件的相关块:

var gulp = require('gulp');
var stylus = require('gulp-stylus');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var browserify = require('browserify');
var reactify = require('reactify');
var source = require('vinyl-source-stream');
var jade = require('gulp-jade');
var nib = require('nib');
var del = require('del');

var cfg = require('./cfg.json');

var action = {
  clean: function(cb){
    del([
      ['./', cfg.dir.root.dev].join('')
    ], cb);
  },
  concatLibs: function(){
    gulp.src([
      './bower_components/jquery/dist/jquery.min.js',
      './bower_components/react/react.js',
      './bower_components/when/es6-shim/Promise.js',
      './bower_components/lodash/lodash.min.js',
      './bower_components/postal.js/lib/postal.min.js',
      './bower_components/oboe/dist/oboe-browser.min.js',
      './bower_components/paper/dist/paper-full.min.js'])
      .pipe(uglify())
      .pipe(concat('lib.js'))
      .pipe(gulp.dest(['./', …

我正在研究paper.js动画。动画包含多个路径。我正在使用ccapture.js导出视频中的动画。ccapture.js的作用是逐帧捕获画布上的图形并将其转换为视频。

我面临的问题是，在动画中，我希望画布的背景颜色为白色。如果我使用css设置画布的背景颜色，则background-color: white;ccapture将忽略该颜色，并且捕获的视频中的背景颜色将为黑色，因为白色不是在画布上绘制的，而仅仅是元素的背景。我已经运气好的测试了这种方法。

我尝试在动画中添加白色矩形路径，但它隐藏了动画，我只能看到白色矩形。我sentToBack()从以下答案中找到了将白色矩形放在后面的函数的引用，我这样使用它：

var rect = new Path.Rectangle({
    point: [0, 0],
    size: [view.size.width / 2, view.size.height / 2],
    strokeColor: 'white',
    fillColor: 'white',
    selected: true
});
rect.sendToBack();

我在paper.js文档中找不到该函数的引用，因此不确定是否使用正确的方法。

我还尝试在paperscript的开头和结尾处创建矩形，以为创建路径的顺序可能会解决问题。但它也无济于事。

是否有其他方法可以将画布的背景填充颜色设置为白色。请问我更多细节。提前致谢。