标签: paperjs

Paper.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);
}

Run Code Online (Sandbox Code Playgroud)

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

javascript graphics paperjs

Gil*_*tes

2013 11-08

6
推荐指数

1
解决办法

6008
查看次数

我可以在paper.js库中换行

我试图理解是否有办法在paper.js textItem中打破一行(\n):http://paperjs.org/reference/textitem

也许有办法以某种方式包装它？我需要它在广场的边缘断裂.

javascript line-breaks paperjs

Alm*_*bin

lucky-day

5
推荐指数

2
解决办法

1219
查看次数

如何使用外部来源的文件？

我正在尝试从教程中学习paper.js,但我不能让它从外部文件中运行.实现外部文档文件的最简单方法是什么？

javascript paperjs

vol*_*lki

lucky-day

5
推荐指数

1
解决办法

2577
查看次数

Paper.js矢量操作

我是paper.js的新手,遇到了一些麻烦.

<script type="text/paperscript" canvas="canvas">
        function onMouseDrag(event) {
            // The radius is the distance between the position
            // where the user clicked and the current position
            // of the mouse.
            var path = new Path.Circle({
                center: event.downPoint,
                radius: (event.downPoint - event.point).length,
                fillColor: 'white',
                strokeColor: 'black'
            });

            // Remove this path on the next drag event:
            path.removeOnDrag();
        };
</script>

Run Code Online (Sandbox Code Playgroud)

在这段代码中(event.downPoint - event.point).length运行良好,但我想直接使用javascript,所以我做了:

<script type="text/javascript">
paper.install(window);
// Keep global references to both tools, so the HTML
// links below can access them.
var …

Run Code Online (Sandbox Code Playgroud)

javascript html5 canvas vector paperjs

Ada*_*szt

lucky-day

5
推荐指数

1
解决办法

2450
查看次数

如何使用paper.js进行平移

我一直试图找出如何在paperjs中使用onMouseDrag和onMouseDown进行平移/缩放。
我见过的唯一参考文献是coffescript，并且未使用paperjs工具。

paperjs

Sam*_*m P

lucky-day

5
推荐指数

2
解决办法

1025
查看次数

Paper.js栅格化层失败

我正在使用Paper.js来绘制图像,添加文本等.然后我需要对图像进行所有草图绘制并将其全部发送回服务器.具体来说,我遇到路径栅格化的问题.我正在尝试使用

paper.project.layers[0].rasterize();

Run Code Online (Sandbox Code Playgroud)

但是当我在图像上执行此操作时,我没有让线条进行栅格化.我结束了

data:,

Run Code Online (Sandbox Code Playgroud)

而不是以"data:image/png; base64"为前缀的base64编码图像.这是一个Paper.js 草图,我有这个工作.要使用它,请在kitty周围单击几次以绘制几行.一旦有两行,就会打开一个新窗口,显示带有红线的光栅化图像.

它适用于草图,但不适用于我自己的代码.

这是我管理绘图的React类:

var DrawingTools = React.createClass({
  componentDidUpdate: function() {
    // Initial path object, will be reset for new paths after Alt is released
    var path = this.newPath();

    // On mousedown add point to start from
    paper.project.layers[0].on('mousedown', function(event) {
      if(event.event.altKey && !event.event.ctrlKey) { // Alt key to add a path, but disallow attempting to add text at the same time
        if(path.lastSegment == null) {
          path.add(event.point, event.point);
        } else {
          path.add(path.lastSegment.point, path.lastSegment.point)
        }
      } …

Run Code Online (Sandbox Code Playgroud)

javascript raster rasterizing paperjs

Sco*_*y H

lucky-day

5
推荐指数

1
解决办法

333
查看次数

Paper.js 外部文件不会加载

我只是想进入 paper.js。当它们被内联时代码工作正常。但是当我将它们移动到一个外部文件并在那里 src 时，错误开始弹出:( 谁能弄清楚我做错了什么？附上错误截图

非常感谢！

错误截图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Paper.js Test</title>
		<script type="text/javascript" src="bower_components/paper/dist/paper-full.min.js"></script>
		<script type="text/paperscript" src="test.js" canvas="myCanvas"></script>
	</head>
	<body>
		<canvas id="myCanvas" resize="true"></canvas>
	</body>
</html>

Run Code Online (Sandbox Code Playgroud)

javascript paperjs

Chr*_*ang

lucky-day

5
推荐指数

1
解决办法

1391
查看次数

Paperjs 0.9.25 - item.setRampPoint不是一个函数

我已经使用paperjs了一年,没有任何问题.在Chrome更新后(Version 55.0.2883.87 m),我在2个月内未触及的一些生产代码开始失败error: item.setRampPoint is not a function:

paper-full.js:13213 Uncaught TypeError: item.setRampPoint is not a function

at offset (paper-full.js:13213)
at Object.<anonymous> (paper-full.js:13263)
at Object.forIn (paper-full.js:46)
at Function.each (paper-full.js:133)
at applyAttributes (paper-full.js:13260)
at importGroup (paper-full.js:12944)
at importSVG (paper-full.js:13324)
at Project.importSVG (paper-full.js:13356)
at drawAddLaneButtons (tlc.js:267)
at Path.window.drawTlcElements (tlc.js:62)

Run Code Online (Sandbox Code Playgroud)

如果我setRamPoint在paperjs代码中注释掉它,它会再次开始工作.

当我尝试将SVG加载到页面时会发生这种情况,但是,正如我之前所说,它在很长一段时间内都运行正常.

我使用的是版本0.9.25 paperjs.

有任何想法吗？

javascript java svg paperjs

Nel*_*ios

2016 12-23

5
推荐指数

1
解决办法

554
查看次数

Paper JS 的编程点击事件

我正在尝试触发MouseEvent将由Paper JS接收的普通 JavaScript 。我有一个 HTML 画布drawing-canvas，已经是paper.setup. 这是我目前的尝试：

const drawingCanvas = document.getElementById('drawing-canvas');
drawingCanvas.dispatchEvent(new MouseEvent('click', {
    buttons: 1,
    clientX: 1153,
    clientY: 550,
    screenX: 1153,
    screenY: 621,
}));

Run Code Online (Sandbox Code Playgroud)

从控制台触发此操作不会触发我的Layer鼠标事件。

这是我在 Paper Sketch 中的尝试。我希望在运行它时进行日志记录。

如何触发 Paper JS 将收到的普通 JS 鼠标事件？

javascript mouseevent dom-events paperjs

Sco*_*y H

2019 03-29

5
推荐指数

1
解决办法

1654
查看次数

Javascript Library to build drag and drop interface and connect elements with line

I am looking for an approach or Javascript library that I can use to build a scientific modeling application. I suppose this is analogues to the way flowcharting software like Visio works. Add elements and connect them with click and drag.