VectorCanvas

Виртуальный векторный канвас:

• Вывод на Canvas
• Экспорт в SVG
• Экспорт в DXF

demo

Browser: import VectorCanvas from 'https://gyverlibs.github.io/VectorCanvas.js/VectorCanvas.min.js'

Node: npm i @alexgyver/vector-canvas

import VectorCanvas from '@alexgyver/vector-canvas';

const vc = new VectorCanvas(300, 200);

vc.setStyle({
    stroke: '#000',
    fill: '#ddd',
    lineWidth: 2,
    font: '16px Arial',
    textAlign: 'center',
    textBaseline: 'middle',
});

vc.rect(20, 20, 120, 80);
vc.fillCircle(80, 60, 16);
vc.arc(180, 60, 24, 0, Math.PI * 1.5);
vc.polyline([[20, 140], [80, 100], [140, 140]]);
vc.fillText('VectorCanvas', 220, 140);

vc.renderTo(canvas);

const pxPerMm = 1;
const svg = vc.toSVG(pxPerMm);
const dxf = vc.toDXF(pxPerMm);

// создать сцену width x height
new VectorCanvas(width, height);

// изменить размер сцены
setSize(width, height);

// полностью сбросить состояние и примитивы
reset();

// очистить только примитивы
clear();

// сохранить/восстановить стиль и слой
save();
restore();

// задать стиль рисования
setStyle({
    stroke, fill, lineWidth,
    font, textAlign, textBaseline,
    layer
});

// переключить слой, color - ACI цвет для DXF
layer(name, color = null);

// линия
line(x1, y1, x2, y2);

// окружность / залитый круг
circle(x, y, r, fill = false);
fillCircle(x, y, r);

// ломаная / замкнутый полигон
polyline(points, closed = false);
polygon(points);

// прямоугольник по позиции и размеру
rect(x, y, w, h, fill = false);
fillRect(x, y, w, h);

// дуга, углы в радианах
arc(x, y, r, a0, a1, ccw = false);

// текст
text(text, x, y, fill = false);
fillText(text, x, y);
// \n внутри text переносит строку

// нарисовать на canvas
renderTo(canvas);

// экспортировать в SVG
toSVG(pxPerMm);

// экспортировать в DXF R12
toDXF(pxPerMm);

pxPerMm - сколько пикселей сцены приходится на 1 мм в экспорте.

По умолчанию все примитивы идут в слой 0.

Текст в DXF может немного отличаться в разных viewer.