使paperjs在电子应用程序中工作

Question

正在进行的另一个学习项目...我正在尝试在电子应用程序中使用paperjs。根据instructions，我认为我应该使用paper-jsdom（如果我错了，请纠正我）。顺便说一句，如果这有所作为，我正在使用TypeScript。我有一个HTML文档，只包含一个空的<canvas>和一个引用此的<script>标记：

import paper, {Color, Point, Path} from 'paper-jsdom'

window.onload = (): void => {
    let canvas = document.getElementById("workspace") as HTMLCanvasElement;
    paper.setup(canvas);

    let path = new Path();
    path.strokeColor = Color.random();
    let start = new Point(100, 100);
    path.moveTo(start);
    path.lineTo(start.add(new Point(200, -50)));
    paper.view.update();
};

马上就知道了：

未捕获的TypeError：paper_jsdom_1。路径不是构造函数

嗯...所以我尝试了一些随机的事情（很晚了，我很累...），然后将import更改为：

import paper from 'paper'
import {Color, Point, Path} from 'paper-jsdom'

有效，或者至少上面的代码有效。

我应该从“ paper”导入某些内容，还是从“ paper-jsdom”导入其他内容吗？在电子应用程序中使用paperjs的正确方法是什么？

很遗憾，paper-jsdom似乎没有TS的任何类型信息。

谢谢！

Answer 1

由于您在Paper.js的渲染器过程中使用Electron，因此您在浏览器上下文中而不是在Node.js上下文中使用它，因此应使用依赖于浏览器paper的通用Canvas API程序包（而不是针对无浏览器使用的paper-jsdom）。因此，您应该能够像在网站上一样使用Paper.js。

从您的代码示例中，我看到您正在使用TypeScript，因此您可以看一下我制作的与Paper.js和TypeScript一起使用的这个简单的快速入门项目。它使用这种导入：

import * as paper from 'paper';

然后通过导入的Paper.js对象访问paper类：

new paper.Path.Circle({
    center   : paper.view.center,
    radius   : 50,
    fillColor: 'orange',
});