Получение бумаги js для работы в электронном приложении

Question

Еще один учебный проект в разработке ... Я пытаюсь использовать бумагу js в электронном приложении. Согласно инструкциям , я думаю я должен использовать 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 не является конструктором

Тьфу ... Так что я попробовал несколько случайных вещей (уже поздно, я устал ...) и изменил свой import на:

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

работает, или хотя бы приведенный выше код работает.

Должен ли я импортировать некоторые вещи из «бумаги», а другие из «бумаги-jsdom»? Как правильно использовать бумагу js в электронном приложении?

К сожалению, 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',
});

Редактирование

Вот хранилище , показывающее самый простой способ использования Paper.js в приложении Electron.