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

【问题标题】：Getting paperjs to work in an electron app让 paperjs 在电子应用程序中工作
【发布时间】：2020-03-30 17:51:21
【问题描述】：

正在进行的另一个学习项目...我正在尝试在电子应用程序中使用 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();
};

所以我马上就明白了：

未捕获的类型错误：paper_jsdom_1.Path 不是构造函数

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

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

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

我应该从“paper”导入一些东西，而从“paper-jsdom”导入一些东西吗？在电子应用中使用 paperjs 的正确方法是什么？

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

谢谢！！

【问题讨论】：

标签： electron paperjs

【解决方案1】：

由于您在Electron 的渲染器进程中使用Paper.js，因此您在浏览器上下文中使用它而不是在Node.js 上下文中，因此您应该使用依赖于浏览器@987654326 的通用paper 包@（而不是针对无浏览器使用的 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 的最简单方法。

【讨论】：