How to become an author
Search
Write a publication
Pull to refresh
11
Karma
0
Rating
Виталий @viklviv

User

Send message
Profile Publications 8Comments 42Bookmarks 103
Чертежи в SVG формате. Часть 5. — Черновик стандарта
Берём карандаш и лист бумаги (в крайнем случаи и шариковая ручка сойдёт). Проводим с десяток линий и смотрим на концы линий.
Берём Ваш скан и изменяем на чёрно-белый, как на начерталке и сравниваем.
This comment wasn’t rated yet0
Look
Чертежи в SVG формате. Часть 5. — Черновик стандарта
поправил, изменил строчку в примерах
svg.configure({width: 840, height: 594, viewBox: '0 0 420 297'}, true);
This comment wasn’t rated yet0
Look
Экспорт чертежа из Компас-график 2D в SVG
в следующем релизе будет понимать, ещё не доработал код для FRW
This comment wasn’t rated yet0
Look
Будущее веб-разработок CAD систем
Пока я не представляю как dwg внедрить в DOM и с помощью JavaScripta с ним работать, поэтому с svg проще + написать для CAD системы простой экспорт из dwg в объектно структурированный svg.
Иначе зачем придумали сам SVG? Можете мне пояснить?
This comment wasn’t rated yet0
Look
jQuery plugin для использования SVG графики. Часть 1
"@ param dimDrawing (number and string[ ][ ])" — а может стоит пользоваться json-подобным набором параметров? как минимум будет читабельнее в использующем функцию коде (и не придется вставлять функцию и описание к ней).

Может и стоит, размер файла описание чертежа вырастит. Может в функции проверять массив или объект и соответственно обрабатывать. Определённые части массива могут не заполнятся, соответственно и какой-то элемент графики не отображаться.
This comment wasn’t rated yet0
Look
jQuery plugin для использования SVG графики. Часть 1
Например, у вас есть чертеж — некий документ. В документе есть страницы. Страницы могут быть собственно чертежами либо страницей с текстом. Страница содержит рамку с описанием. Ну, а далее на странице расположены элементы разных типов.

Но только это не примитивы svg, а свои элементы (в принципе вы и делаете эти элементы). В дальнейшем у вас будет библиотека элементов. Еще возможно внедрение областей и слоев на странице (возможно даже функциональных слоев — надписи в одном слое, блоки в другом). Все это реализуемо в рамках svg.


Есть документ. У него нет страниц. Это область листа определённого формата. Он может быть разного вида(типа): фрагмент, чертёж, спецификация, текстовый документ (он тоже имеет рамочку с штампом как и у чертежа и каждая страница текстовой документации рассматривается как отдельный документ). Чертёж детали может состоять из нескольких документов (листов) как и спецификация (страниц).
Для вида(типа) чертёж в области листа размещаются виды (фрагмент вида детали с одной стороны) в определённом масштабе. В области вида кроме примитивов (линия, дуга, окружность) размещены объекты: размеры, обозначение линии разреза, обозначение шероховатости, лини-выноски. Графическая и текстовая части объекта (размера, позиции и др.) не может быть разнесена на разные слои.
Набор слоёв размещается в каждом виде и могут быть слои в области листа. Слой — группа элементов отображенная одним цветом.

Так как набрасываю черновик библиотеки для экспорта/импорта из Компас-график в SVG, то мне проще документ описать так
cad.line(vsf,50,-30,50,30,3);
cad.line(vsf,450,-30,450,30,3);
cad.line(vsf,250,-150,250,200,3);
cad.line(vsf,-25,0,525,0,3);

чем так
page = new Page();
page.add(new Shtamp());
block = new Block(0,100,80,90);
block.add(new Circle({radius:100,x:10,y:10,show_dimensions:true}));
block.add(new Text({x:10,y:10,text:''это типа круг'}))
page.add(block);
page.export(type:svg);

И по мере изменений поддержки браузерами SVG вносить изменения в библиотеку на JavaScript, чем в библиотеку под Компас-график или другую CAD систему.
This comment wasn’t rated yet0
Look
jQuery plugin для использования SVG графики. Часть 1
Возможно, стоит предусмотреть вам свое описание предметной области для отрисовки чертежей. Некое подобие объектно-ориентированного формата, в котором будут методы, реализующие отрисовку тех или иных элементов формата в svg.

Так и есть.
Например описание вида на листе чертежа
var vsf = cad.view(250, 45, 125, 100, -50, -50, 500, 400);

Описание функции
/* Add an embedded SVG element.
	   Specify all of vx, vy, vwidth, vheight or none of them.
	   @param  parent    (element or jQuery) the parent node for the new node (optional)
	   @param  x         (number) the x-coordinate for the left edge of the node
	   @param  y         (number) the y-coordinate for the top edge of the node
	   @param  width     (number) the width of the node
	   @param  height    (number) the height of the node
	   @param  vx        (number) the minimum x-coordinate for view box (optional)
	   @param  vy        (number) the minimum y-coordinate for the view box (optional)
	   @param  vwidth    (number) the width of the view box (optional)
	   @param  vheight   (number) the height of the view box (optional)
	   @param  settings  (object) additional settings for the node (optional)
	   @return  (element) the new node */
	view: function(parent, x, y, width, height, vx, vy, vwidth, vheight, settings) {


Например описание линейного размера в виде (не примитив svg)
    var dimText = [0, 0, '120'];
    var dimDrawing = [0, [190,180,'dimArrow1'],[310,180,'dimArrow2'],[0,50,1]];
    cad.diml(vsf, dimDrawing, dimText);

Описание функции
/* Draw a linear dimension
	   @param  parent    (element or jQuery) the parent node for the new shape (optional)
	   @param  dimDrawing (number and string[][]) the options drawing dimensions
	   @param  dimText   (number and string[][]) the options drawing text
	   @return  (element) the new shape node */
    diml: function(parent, dimDrawing, dimText) {

Задаю два массива dimText — для текстовой части, dimDrawing — для графической.
Функция cad.diml создаёт по заданным данным массива конструкцию в SVG в виде vsf.

Например описание штриховки (не примитив svg)
cad.hatch(vsf,'hatch1_45','M230,290L230,325 320,325 320,290z');

Описание функции
/* Draw a hatch
	   @param  parent    (element or jQuery) the parent node for the new shape (optional)
	   @param  nameHatch (string) the name hatch
	   @param  contour   (string) the definition of the outline of a shape
	   @return  (element) the new shape node */		
    hatch: function(parent, nameHatch, contour) {
		return this.path(parent, contour, {fill: 'url(#'+nameHatch+')'});		
	},

Функция cad.hatch создаёт по заданным данным ( hatch1_45 — шаблон штриховки и контуру) конструкцию в SVG в виде vsf.

Например описание дуги
   cad.arc(vsf,187,-125.024,313,-125.024,140,0,1);

Описание функции
/* Draw a arc.
	   @param  parent    (element or jQuery) the parent node for the new shape (optional)
	   @param  x1        (number) the x-coordinate for the start of the line
	   @param  y1        (number) the y-coordinate for the start of the line
	   @param  x2        (number) the x-coordinate for the end of the line
	   @param  y2        (number) the y-coordinate for the end of the line	   
	   @param  r         (number) the radius of the circle
	   @param  large      (boolean) true to draw the large part of the arc,
	                      false to draw the small part (omitted if rx is array)
	   @param  clockwise  (boolean) true to draw the clockwise arc,
	                      false to draw the anti-clockwise arc (omitted if rx is array)
	   @param  type      (number) the type of the line (optional)
	   @return  (element) the new shape node */	
	arc: function(parent, x1, y1, x2, y2, r, large, clockwise, type) {
This comment wasn’t rated yet0
Look
jQuery plugin для использования SVG графики. Часть 1
Почему jquery.svg.js? Правильно ли я понимаю, что обзор делается в рамках разработки стандарта чертежей?

Описание чертежа на JavaScript тоже тестировал с использованием библиотеки jquery.svg.js. Для более компактного кода чертежа, взяв всё необходимое из jquery.svg.js переписываю в jquery.cad.js с методами более понятными для описания чертежа.

Пример
function drawIntro(cad) {
  var defs = cad.defs('defsCAD',['dimArrow','point']);  
  cad.title('SVG for CAD');
  var Draw = cad.group();
      var Shtamp = cad.group(Draw,'Shtamp');
          cad.rect(Shtamp,20,5,395,287);
          cad.line(Shtamp,230,237,415,237);
          cad.line(Shtamp,230,237,230,292);
          cad.line(Shtamp,90,5,90,19);
          cad.line(Shtamp,20,19,90,19);
          cad.rect(Shtamp,1,1,418,295,2);
	  ...	
  var vsf = cad.view(50, 7, 170, 165, -25, -200, 680, 660);	
	cad.title(vsf, 'View 1');
	cad.line(vsf,0,325,500,325);
	cad.line(vsf,0,225,0,325);
	cad.line(vsf,0,225,250,225);
	cad.line(vsf,140,225,190,0);
	...
	
	cad.line(vsf,250,350,250,-25,3);
	cad.line(vsf,50,350,50,200,3);
	cad.line(vsf,450,350,450,200,3);	

	cad.line(vsf,210,0,210,250,4);
	cad.line(vsf,160,250,190,250,4);
	cad.line(vsf,160,325,160,250,4);	
	
	cad.line(vsf,25,325,25,225,4);
	cad.line(vsf,75,325,75,225,4);
	cad.line(vsf,425,325,425,225);
	cad.line(vsf,475,325,475,225);	
    
    var hatch1_45 = cad.pattern(defs, 'hatch1_45', 0, 0, 20, 20,
        0, 0, 20, 20, {patternUnits: 'userSpaceOnUse'});
          cad.line(hatch1_45,1,20,20,1,2);
          cad.line(hatch1_45,0,1,1,0,2);
	  
	cad.hatch(vsf,'hatch1_45','M475,225L475,325 500,325 500,225z');
	cad.hatch(vsf,'hatch1_45','M290,0V250H340V325H425V225H360L310,0z');

	var dimText = [0, 0, '325'];
	var dimDrawing = [1, [310,0,'dimArrow1'],[500,325,'dimArrow2'],[275,0,1]];
	cad.diml(vsf, dimDrawing, dimText);
	
	var dimText = [0, 0, '100'];
	var dimDrawing = [1, [500,225,'dimArrow1'],[500,325,'dimArrow2'],[45,0,1]];
	cad.diml(vsf, dimDrawing, dimText);
	  
  var vsf = cad.view(25, 158, 200, 135, -100, -250, 800, 540);
	cad.title(vsf, 'View 2');	
	cad.circle(vsf,250,0,40);
	cad.circle(vsf,250,0,60);
	cad.circle(vsf,50,0,25);
	cad.circle(vsf,450,0,25);	
	cad.line(vsf,50,-30,50,30,3);
	cad.line(vsf,450,-30,450,30,3);
	cad.line(vsf,250,-150,250,200,3);
	cad.line(vsf,-25,0,525,0,3);	
	cad.line(vsf,27.5,44.6514,170,116.457);
	cad.line(vsf,472.5,44.6514,330,116.457);
	cad.line(vsf,27.5,-44.6514,187,-125.024);
	cad.line(vsf,472.5,-44.6514,313,-125.024);
	...

	cad.arc(vsf,187,-125.024,313,-125.024,140,0,1);	
	cad.arc(vsf,27.5,44.6514,27.5,-44.6514,50,0,1);
	cad.arc(vsf,472.5,44.6514,472.5,-44.6514,50,0,0);
	cad.arc(vsf,162.822,67.082,337.178,67.082,110,1,1);
	cad.arc(vsf,180.459,57.132,319.54,57.132,90,0,0);

	cad.cbezier(vsf, 'M140,101.34 C144.696,86.7859 152.303,75.3664 162.822,67.082C167.996,63.0066 174.363,58.9944 180.459,57.132C194.3626,52.8843 213.0561,57.1320 225.5589,67.082C232.5067,72.6114 241.8569,77.1221 250,77.9937C263.3438,79.4220 275.9399,63.2633 290.0,60C299.5142,57.7918 310.4253,54.6301 319.5409,57.132C325.7604,58.8390 332.0035,63.0066 337.1780,67.082C347.6966,75.3664 353.3294,89.2060 360,101.3405', 2);
	
	cad.hatch(vsf,'hatch1_45','M170,180L170,116.4576 140,101.3405C144.696,86.7859,152.303,75.3664,162.822,67.082C167.996,63.0066,174.363,58.9944,180.459,57.132A90,90,0,0,0,190,67.082L190,180z');
	cad.hatch(vsf,'hatch1_45','M310,180L310,67.082A90,90,0,0,0,319.54,57.132C325.7604,58.839,332.0035,63.0066,337.1780,67.082C347.6966,75.3664,353.3294,89.206,360,101.3405L330,116.4576 330,180z');
	
	var dimText = [0, 0, '120'];
	var dimDrawing = [0, [190,180,'dimArrow1'],[310,180,'dimArrow2'],[0,50,1]];
	cad.diml(vsf, dimDrawing, dimText);

	var dimText = [0, 0, '160'];
	var dimDrawing = [0, [170,180,'dimArrow1'],[330,180,'dimArrow2'],[0,85,1]];
	cad.diml(vsf, dimDrawing, dimText);

	var dimText = [0, 0, '320'];
	var dimDrawing = [1, [330,180,'dimArrow1'],[250,-140,'dimArrow2'],[230,0,1]];
	cad.diml(vsf, dimDrawing, dimText);
	  
  var vsf = cad.view(250, 45, 125, 100, -50, -50, 500, 400);
	cad.title(vsf, 'View 3');
        cad.line(vsf,0,325,320,325);
	cad.line(vsf,0,225,30,225);
	cad.line(vsf,0,225,0,325);
        cad.line(vsf,320,325,320,225);
	...
	cad.line(vsf,140,350,140,-25,3);

	cad.hatch(vsf,'hatch1_45','M230,290L230,325 320,325 320,290z');
	cad.hatch(vsf,'hatch1_45','M0,325L0,225 30,225 80,0 100,0 100,250 50,250 50,325z');
	cad.hatch(vsf,'hatch1_45','M180,250L180,0 200,0 250,225 320,225 320,250z');

	var dimText = [0, 0, '40'];
	var dimDrawing = [1, [320,250,'dimArrow2'],[320,290,'dimArrow1'],[50,0,1]];
	cad.diml(vsf, dimDrawing, dimText);

	var dimText = [0, 0, '75'];
	var dimDrawing = [1, [320,250,'dimArrow1'],[320,325,'dimArrow2'],[100,0,1]];
	cad.diml(vsf, dimDrawing, dimText); 
};
This comment wasn’t rated yet0
Look
jQuery plugin для использования SVG графики. Часть 1
автора плагина беспокоит, хотя и не везде в примерах
This comment wasn’t rated yet0
Look
jQuery plugin для использования SVG графики. Часть 1
процетирую
Расширенные возможности CSS, применяемые при разработке среднего современного сайта, скорее всего будут отображены старым броузером искаженно или вообще не позволят открыть страницу.
Скрытие стилей с помощью метода @ import (Netscape 4, Internet Explorer 4 и другие старые броузеры не поддерживают возможность ссылки на таблицу стилей с помощью метода @ import, а благодаря особенностям CSS эта непонятная команда будет ими проигнорирована) позволит избежать таких сбоев. На самом деле даже не обязательно добавлять базовую таблицу стилей – если вы присоединяете свою таблицу стилей с помощью @ import, то в старых броузерах документ будет отображен в соответствии с их внутренней таблицей стилей.
Total votes 1: ↑1 and ↓0+1
Look
jQuery plugin для использования SVG графики. Часть 1
Правило @ import позволяет импортировать содержимое CSS-файла в текущую стилевую таблицу.
Total votes 2: ↑1 and ↓10
Look
Будущее веб-разработок CAD систем
Создать online cad? Она может замечательно работать на DWG. Более того, она обязана работать с DWG (хотя бы на уровне импорт/экспорт), иначе у нее будет существенно меньшее кол-во пользователей.

Может импорт/экспорт лучше реализовать на уровне библиотеки под CAD offLine системы. В AutoCAD 2014 появилось JavaScript API.
Когда я имею чертёж в Document Object Model то проще работать с таким чертежом в облаках. Чем работать с DWG.
Ваши слова:
По сути DWG — это расширяемая в разные стороны база данных.

Зачем ещё одна база данных в облаках?

Давайте отойдем от DWG и SVG и посмотрим на форматы DOC и DOCX.
DOC — двоичный файл документа.
На основе формата DOC и XML разработан новый формат текстовых файлов.
DOCX — Office Open XML

Теперь вспомним главный вопрос: зачем?

Total votes 1: ↑0 and ↓1-1
Look
Будущее веб-разработок CAD систем
Сейчас никак, а где то через 25 лет думаю также как и в DWG.
Веб-технологии не топчутся на месте.
В Википедии пишут что в AutoCAD 2014 появилось JavaScript API.
This comment wasn’t rated yet0
Look
Будущее веб-разработок CAD систем
Формат DWG — это не просто линии, штриховки и т.п. Это еще и ряд технологий вокруг этого формата — прокси-объекты и XDATA, внешние ссылки, пространство модели-листа, блоки и динамические блоки, поддержка растров и PDF, слои и комбинации слоев, автозаполняемые поля, параметризация и зависимости, 3D данные…

DWG — разработан в конце 1970-х, лицензирован компанией Autodesk в 1982
SVG — Разрабатывается с 1999 года. В 2001 году вышла версия 1.0
Думаю DWG ни в один миг получил то что Вы описали. С чего то надо начинать, думаю с самого простого.
Реализовать расчётную задачу с формированием пакета чертежей в SVG для просмотра/печати с последующим импортом для редактирования в одну из CAD offLine систем думаю не составляет особых трудностей. Хотя есть уже и редакторы SVG onLine. Очень много таких простых расчетных задач.
This comment wasn’t rated yet0
Look
Будущее веб-разработок CAD систем
1. Не надо устраивать войн за формат, есть возможность использовать SVG.
2. SVG в облачный САПР как внутренний формат. Не тянуть за уши DWG в облако.
3. SVG in 3D
4. Локально на компьютере STEP меня вполне устраивает, а для облаков есть SVG.
This comment wasn’t rated yet0
Look
Будущее веб-разработок CAD систем

такой же пример из Компас-графика (скан), я понимаю что ещё мой пример в SVG далёк до идеальности, будем усовершенствовать
This comment wasn’t rated yet0
Look
Будущее веб-разработок CAD систем
Не буду спорить, что можно сделать отдельный формат на основе SVG

тоже так думаю, и продумываю варианты
This comment wasn’t rated yet0
Look
Будущее веб-разработок CAD систем
1. Используя CSS можно иметь какие угодно стили.
2. Пробовал вставлять, видимо редактор такого не предусматривает
This comment wasn’t rated yet0
Look
Будущее веб-разработок CAD систем
в DXF мы легко отфильтруем по координатам те объекты, которые должны быть видны на экране

Таким же алгоритмом отфильтруем по координатам объекты и в SVG. Мы имеем те же координаты и объекты.
This comment wasn’t rated yet0
Look
Будущее веб-разработок CAD систем
На форуме сайта DWG.RU появился призыв:
Ни одна браузерная игра не обходится без багов. Причем, баги зависят от браузера, от составляющих компа, от его старинности и т.д. Товарищи, не надо онлайн CAD делать, пожалуйста…
This comment wasn’t rated yet0
Look
BackHere
1
23

Information

Rating
Does not participate
Location
Львов, Львовская обл., Украина
Date of birth
Registered
Activity

Your account

Sections

Information

Services

Support
© 2006–2024, Habr