让 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();
};

所以我马上得到：

Uncaught TypeError: paper_jsdom_1.Path is not a constructor

呃...所以我尝试了一些随机的事情（已经晚了，我累了...）并将我的 import 更改为：

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

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

我应该从 'paper' 导入一些东西，从 'paper-jsdom' 导入其他东西吗？在电子应用程序中使用 paperjs 的正确方法是什么？

不幸的是 paper-jsdom 似乎没有 TS 的任何类型信息。

谢谢！！

Answer 1

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

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

import * as paper from 'paper';

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

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

编辑

这里是 repository 展示了在 Electron 应用程序中使用 Paper.js 的最简单方法。

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

Getting paperjs to work in an electron app

paperjs

electron

编辑