В "Чертежи в SVG формате. Часть 4 — Черновик стандарта " приведён пример рисования размеров. В продолжении рассмотрим использование JavaScript и сравним файлы чертежей в разных форматах.
Для описания чертежа будем использовать плагин jquery.svg.js. Введение о плагине можете прочитать в статье jQuery plugin для использования SVG графики
Одной из решаемых задач использование плагина — минимизация описания чертежа. Описание чертежа будет в виде функции и иметь такую же объектную модель как и в SVG.
Сокращённый пример функции описания чертежа
При описании линии в SVG формате вместо
можно записать линию в другом виде для минимизации
то для плагина такой трюк не даёт выигрыша
Сравнив выше приведенные примеры описания линии, придём к выводу что использование JavaScript мы не получим уменьшение кода.
Необходимо написание специализированного плагина. В чертежах наибольшее количество линий стилем 1 (основная линия), линии стилем 2 (тонкая линия) чаще входит в состав размеров и др. сложных объектов. Можно по умолчанию для линий стилем 1 опускать описание, где код будет такого вида
Приведу пример для описания размера
в SVG формате
в формате функции плагина jquery.svg.js
в формате функции специализированного плагина
Демонстрационный пример использования плагина jquery.svg.js
Второй демонстрационный пример
архив с тестовым примером 1
архив с тестовым примером 2
Первый тестовый пример создавался вручную в обычном редакторе и содержит около 300 элементов, второй экспортировался библиотекой из Компас-график и содержит более 3000 элементов. Файлы форматов .DXF и .DWG создавались экспортом из Компас-график. Все файлы в форматах .SVG и .SVGZ прекрасно открываются последней версией редактора Inkscape.
Сравнительная таблица размера файла в разных форматах
Обновляемая версия статьи
Для описания чертежа будем использовать плагин jquery.svg.js. Введение о плагине можете прочитать в статье jQuery plugin для использования SVG графики
Одной из решаемых задач использование плагина — минимизация описания чертежа. Описание чертежа будет в виде функции и иметь такую же объектную модель как и в SVG.
Сокращённый пример функции описания чертежа
function drawIntro(svg) {
svg.configure({viewBox: '0 0 420 297'}, true);
var defs = svg.defs();
/* Рисование штриховки - Hatch */
/* металл */
var hatch0_45 = svg.pattern(defs, 'hatch0_45', 0, 0, 20, 20,
0, 0, 20, 20, {patternUnits: 'userSpaceOnUse'});
svg.line(hatch0_45, 1, 20, 20, 1, {class_: 'line-type-2'});
svg.line(hatch0_45, 0, 1, 1, 0, {class_: 'line-type-2'});
/* металл, масштаб 0,25 */
var hatch0_45_0_25 = svg.pattern(defs, 'hatch0_45-0_25', 0, 0, 20, 20,
0, 0, 20, 20, {patternUnits: 'userSpaceOnUse'});
svg.line(hatch0_45_0_25, 1, 20, 20, 1, {class_: 'line-type-2-0_25'});
svg.line(hatch0_45_0_25, 0, 1, 1, 0, {class_: 'line-type-2-0_25'});
/* неметалл, масштаб 0,25 */
var hatch1_45_0_25 = svg.pattern(defs, 'hatch1_45-0_25', 0, 0, 20, 20,
0, 0, 20, 20, {patternUnits: 'userSpaceOnUse'});
svg.line(hatch1_45_0_25, 0, 20, 20, 0, {class_: 'line-type-2-0_25'});
svg.line(hatch1_45_0_25, 0, 0, 20, 20, {class_: 'line-type-2-0_25'});
/* Шаблоны рисования стрелок и засечек */
/* левая стрелка (стрелка изнутри) */
var dimp1 = svg.marker(defs, 'dimArrow-1', 0, 0, 8, 6, 'auto', {viewBox: '-2 -12 29 24'});
svg.path(dimp1, 'M0,0 L20,-4 16,0 20,4 z M0,-10 L0,10 M0,0 L27,0', {stroke: 'black', strokeWidth: 1.4});
/* правая стрелка (стрелка снаружи) */
var dimp2 = svg.marker(defs, 'dimArrow-2', 0, 0, 8, 6, 'auto', {viewBox: '-27 -12 29 24'});
svg.path(dimp2, 'M0,0 L-20,-4 -16,0 -20,4 z M0,-10 L0,10 M0,0 L-27,0', {stroke: 'black', strokeWidth: 1.4});
/* стрелка линии разреза/сечения */
var viewp3 = svg.marker(defs, 'ViewPoint', 0, 0, 10.6, 8.8, 'auto', {viewBox: '-2 -12 29 24'});
svg.path(viewp3, 'M3,0 L23,-4 19,0 23,4 z', {stroke: 'black', strokeWidth: 1.4});
svg.title('SVG for CAD');
var Shtamp = svg.svg( 0, 0, 420, 297, 0, 0, 420, 297);
svg.title(Shtamp, 'Штамп чертежа');
svg.rect(Shtamp, 20, 5, 395, 287, {class_: 'line-type-1'});
svg.line(Shtamp, 230, 237, 415, 237, {class_: 'line-type-1'});
...
/* Рисование вида - View1 */
var View1 = svg.svg( 45, 7, 155, 170, -25, -200, 620, 680);
svg.title(View1, 'Вид 1');
svg.line(View1, 0, 325, 500, 325, {class_: 'line-type-1-0_25'});
svg.line(View1, 0, 225, 0, 325, {class_: 'line-type-1-0_25'});
...
/* Рисование вида - View2 */
var View2 = svg.svg( 25, 158, 200, 130, -100, -250, 800, 520);
svg.title(View2, 'Вид 2');
svg.circle(View2, 250, 0, 40, {class_: 'line-type-1-0_25'});
svg.circle(View2, 250, 0, 60, {class_: 'line-type-1-0_25'});
...
/* Рисование вида - View3 */
var View3 = svg.svg(250, 45, 150, 200, -50, -50, 600, 800);
svg.title(View3, 'Вид 3');
svg.line(View3, 0, 325, 320, 325, {class_: 'line-type-1-0_25'});
svg.line(View3, 0, 225, 30, 225, {class_: 'line-type-1-0_25'});
...
}При описании линии в SVG формате вместо
<line class="line-type-1" x1="475" y1="325" x2="475" y2="225"/>можно записать линию в другом виде для минимизации
<path class="line-type-1" d="M475,325L475,225"/>то для плагина такой трюк не даёт выигрыша
svg.line(View1,247,237,247,292,{class_:'line-type-1'});
svg.path(View1,'M247,237L247,292',{class_:'line-type-1'});Сравнив выше приведенные примеры описания линии, придём к выводу что использование JavaScript мы не получим уменьшение кода.
Необходимо написание специализированного плагина. В чертежах наибольшее количество линий стилем 1 (основная линия), линии стилем 2 (тонкая линия) чаще входит в состав размеров и др. сложных объектов. Можно по умолчанию для линий стилем 1 опускать описание, где код будет такого вида
svg.line(View1,247,237,247,292);Приведу пример для описания размера
в SVG формате
<g class="DimL">
<line class="line-type-2-0_25" x1="190" y1="180" x2="190" y2="230"/>
<line class="line-type-2-0_25" x1="310" y1="180" x2="310" y2="230"/>
<line class="line-type-2-0_25" x1="190" y1="230" x2="310" y2="230"/>
<path stroke-width="4" d="M190,230L310,230" marker-start="url(#dimArrow-1)" marker-end="url(#dimArrow-2)"/>
<text class="styles-3" x="265" y="222" font-size="28" text-anchor="middle">120</text>
</g>
в формате функции плагина jquery.svg.js
var dimL1 = svg.group(View2);
svg.line(dimL1, 190, 180, 190, 230, {class_: 'line-type-2-0_25'});
svg.line(dimL1, 310, 180, 310, 230, {class_: 'line-type-2-0_25'});
svg.line(dimL1, 190, 230, 310, 230, {class_: 'line-type-2-0_25'});
svg.path(dimL1, 'M190,230 L310,230', {strokeWidth: 4, markerStart: 'url(#dimArrow-1)', markerEnd: 'url(#dimArrow-2)'});
svg.text(dimL1, 265, 222, '120', {class_: 'styles-3', fontSize: '28', textAnchor: 'middle'});в формате функции специализированного плагина
var dimText = [0, 0, '120'];
var dimDrawing = [0, [190,180,'dimArrow-1'],[310,180,'dimArrow-2'],[0,50,1]];
svg.diml(View2, dimDrawing, dimText);Демонстрационный пример использования плагина jquery.svg.js
Второй демонстрационный пример
архив с тестовым примером 1
архив с тестовым примером 2
Первый тестовый пример создавался вручную в обычном редакторе и содержит около 300 элементов, второй экспортировался библиотекой из Компас-график и содержит более 3000 элементов. Файлы форматов .DXF и .DWG создавались экспортом из Компас-график. Все файлы в форматах .SVG и .SVGZ прекрасно открываются последней версией редактора Inkscape.
Сравнительная таблица размера файла в разных форматах
| Формат | Пример 1, байт | Пример 2, байт | файл стилей CSS, байт |
|---|---|---|---|
| .CDW (Компас-график 9) | 50 146 | 182 778 | - |
| .DWG (Компас-график 9) | 65 751 | 226 583 | - |
| .DXF (Компас-график 9) | 182 817 | 807 300 | - |
| .SVG | 29 110 | 306 678 | - |
| .SVG минимизированный | - | 175 671 | - |
| .SVGZ | 5 435 | 55 763 | - |
| .SVGZ минимизированный | - | 32 784 | - |
| .JS, плагин jquery.svg.js | 23 012 | 267 897 | 4 589 |
| .JS минимизированный, плагин jquery.svg.js | 15 490 | 179 071 | 1 728 |
| Растровый файл в формате .PNG | 51 970 | 57 384 | - |
Обновляемая версия статьи
