标签: paperjs

我已经逐渐喜欢paper.js但是在意识到它不支持IE8后,我想知道是否有可能让paper.js与excanvas一起工作？有人测试过这个并且有可用的例子吗？

谢谢.

我使用普通的javascript将图像添加到画布,这是代码

var canvas = document.getElementById('canvas');
context = canvas.getContext('2d');

canvas_image();

function canvas_image(){
    can_img = new Image();
    can_img.src = 'Chrysanthemum.jpg';
    can_img.onload = function(){
    context.drawImage(can_img, 100, 100);   
    }
}

如何使用paperJS库将图像添加到画布？

我正在用Paper.js制作一个小型射击游戏,但是我无法找到Paperscript提供任何方法来获得我的一组项目的当前轮换.

在下面的代码中,使用Q和E键旋转"circlegroup"应该影响WASD导航,将项目移动到对象的"鼻子"当前指向的方向.我想我需要获取项目的当前轮换以影响导航.Paper.js提供了任何方法吗？

您可以在此处查看/编辑Papersketch

bigcircle = new Path.Circle({
  radius:10,
  fillColor: 'grey',
  position: (10, 20),
  selected: true
});

smallcircle = new Path.Circle({
  radius:5,
  fillColor: 'black'
});

var circlecontainer  = new Group({
  children:[smallcircle, bigcircle],
  position: view.center
});


var circlegroup = new Group({
  children: [circlecontainer]
});

function onKeyDown(event) {
  if(event.key == 'w') {
    circlegroup.position.y -= 10;
  }
  if(event.key == 'a') {
    circlegroup.position.x -= 10;
  }
  if(event.key == 's') {
    circlegroup.position.y += 10;
  }
  if(event.key == 'd') {
    circlegroup.position.x += 10;
  }
  if(event.key …

我正尝试使用react-starter-kit将paper.js与webpack一起使用.

仅供参考,我不得不安装json-loader和node-loader,我也必须添加节点到webpack配置,以摆脱像这样的构建错误

ERROR in ./~/paper/dist/paper-node.js
Module not found: Error: Cannot resolve module 'fs' in /home/bojan/www/react/MyApp/node_modules/paper/dist
 @ ./~/paper/dist/paper-node.js 4808:3-16 10779:10-23 12253:10-23

这就是我的webpack.config.js的样子

var config = {
  ...

  resolve: {
    extensions: ['', '.webpack.js', '.web.js', '.js', '.jsx', '.json', '.node']
  },

  module: {
    loaders: [
      {
        test: /\.json$/,
        loader: "json-loader"
      },
      {
        test: /\.node$/,
        loader: "node-loader"
      },
      ...
    ]
  },

  node: {
    child_process: 'empty',
    console: 'empty',
    dgram: 'empty',
    dns: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty'
  }
}; …

我正在尝试使用paper.js制作一个非常简单的动画.我想要做的是如何制作随机形状的三角形.我试图制作几个图层来显示各种形状,但事实证明,加载页面需要很长时间.以下是我现在的代码.如果有人知道解决方案,那就太棒了.谢谢!

   var count = 30;

   var path = new Path.RegularPolygon({
      center:new Point(30, 100),
       sides: 3,
       radius: 2000,
   });
   path.fillColor = 'rgba(98, 178, 177, 0.18)';
   path.blendMode = 'multiply';
   path.scale(1,0.8);
   path.rotate(-90);


   var symbol = new Symbol(path);


   // Place the instances of the symbol:
   for (var i = 0; i < count; i++) {
      // The center position is a random point in the view:
      var center = Point.random() * view.size;
      var placedSymbol = symbol.place(center);
      placedSymbol.scale(i / count);
   }


   // The onFrame function …

抱歉我的数学知识很差。

我怎样才能画出这样的平行线：

这是我当前的代码：

<canvas id='canvas' resize></canvas>

我正在使用 PaperJS ( http://paperjs.org )：

<script type='text/javascript' src='http://paperjs.org/assets/js/paper.js'></script>

这是我的脚本：

<script type='text/paperscript' canvas='canvas'>
    var path1    = new Path();
    var path2    = new Path();
    var path3    = new Path();
    var distance = 20;

    path1.strokeWidth = 2.0;
    path1.strokeColor = 'black';
    path2.strokeWidth = 2.0;
    path2.strokeColor = 'black';
    path2.dashArray   = [4, 4];
    path3.strokeWidth = 2.0;
    path3.strokeColor = 'black';

    function onMouseDown (event) {
       path2.add(event.point);
       path1.add(event.point - distance);
       path3.add(event.point + distance);
    };
</script>

这是我的糟糕结果（我用红色圆圈四舍五入）：

http://paperjs.org/examples/

我正在尝试使用 Chain 创建自定义路径，我看到 Tadpoles 有一个预定义的心形路径，所以我试图复制它，但我不明白其中的一些部分。

VAR = heartPath新路径（'M514.69629,624.70313c-7.10205，-27.02441 -17.2373，-52.39453 -30.40576，-76.10059c-13.17383，-23.70703 -38.65137，-60.52246 -76.44434，-110.45801c-27.71631，-36.64355 -44.78174，-59.89355 -51.19189，-69.74414c-10.5376，-16.02979 -18.15527，-30.74951 -22.84717，-44.14893c-4.69727，-13.39893 -7.04297，-26.97021 -7.04297，-40.71289c0，-25.42432 8.47119，-46.72559 25.42383，-63.90381c16.94775，-17.17871 37.90527，-25.76758 62.87354，-25.76758c25.19287,0 47.06885,8.93262 65.62158,26.79834c13.96826,13.28662 25.30615,33.10059 34.01318,59.4375c7.55859，-25.88037 18.20898，-45.57666 31.95215，-59.09424c19.00879，-18.32178 40.99707，-27.48535 65.96484，-27.48535c24.7373,0 45.69531,8.53564 62.87305,25.5957c17.17871,17.06592 25.76855,37.39551 25.76855,60.98389c0,20.61377 -5.04102,42.08691 -15.11719， 64.41895c-10.08203,22.33203 -29.54687,51.59521 -58.40723,87.78271c-37.56738,47.41211 -64.93457,86.35352 -82.11328,116.8125c-13.51758,24.0498,24.0498 -23.82422,49.2492,49.24022,49.249.59.249.57

我不明白路径开头的M是什么意思，或者某些值中的c或路径末尾的z是什么意思。我试图在他们的文档或谷歌中找到有关它的信息，但我找不到我想要的东西，因为单个字母使搜索变得困难。

我试图在开始时移除M并且蝌蚪停止移动，所以我认为 M 可能意味着“移动”？删除c会改变心脏的形状，但删除z似乎没有任何改变。

我想在 paperjs 中拖动矩形并调整其大小，我还想旋转矩形并调整其大小，同时保持其相对尺寸。

理想情况下，我想通过拖动鼠标的一个角（锚点）来这样做。什么数学或功能有助于在 paperjs 中做到这一点？

我已经通过使用缩放和修改角来尝试这个，但它不能像我想要的那样工作。有人可以指出我的解决方案吗？

提前致谢。

似乎没有过滤器，也没有办法在 paperjs 中处理画布上下文。

那么在 paperjs 中使 Item 模糊的最佳实践是什么？

在 Paper.js 中，我使用以下方法导入了 SVG：

var kanji = project.importSVG(url, {\n  expandShapes: true,\n  onLoad: function(item) {\n    console.log("imported SVG!");\n\n  },\n  onError: console.log("something went wrong importing")\n});\n

这成功地将 svg 添加到我的画布中。但是，我想操纵 SVG 的路径。当代码到达 onLoad 范围时，我感到困惑。这里我得到了我命名的 svg item，它是一个大而复杂的对象：

initialize\xc2\xa0{_children: Array(3), _namedChildren: {\xe2\x80\xa6}, _matrix: t, _id: 1, _index: 0,\xc2\xa0\xe2\x80\xa6}\n

由于子数组的内容有更多的子元素，因此有很多其他选项。\n我想访问/复制/操作路径的节点，但我什至无法在对象中找到路径。我该怎么做？\n从 svg 文件本身获取路径似乎更容易。或者我在这里遗漏了什么？

谢谢！