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

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

    Но только это не примитивы 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 систему.
  • jQuery plugin для использования SVG графики. Часть 1
    0
    Возможно, стоит предусмотреть вам свое описание предметной области для отрисовки чертежей. Некое подобие объектно-ориентированного формата, в котором будут методы, реализующие отрисовку тех или иных элементов формата в 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) {
    
  • jQuery plugin для использования SVG графики. Часть 1
    0
    Почему 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); 
    };
  • jQuery plugin для использования SVG графики. Часть 1
    0
    автора плагина беспокоит, хотя и не везде в примерах
  • jQuery plugin для использования SVG графики. Часть 1
    +1
    процетирую
    Расширенные возможности CSS, применяемые при разработке среднего современного сайта, скорее всего будут отображены старым броузером искаженно или вообще не позволят открыть страницу.
    Скрытие стилей с помощью метода @ import (Netscape 4, Internet Explorer 4 и другие старые броузеры не поддерживают возможность ссылки на таблицу стилей с помощью метода @ import, а благодаря особенностям CSS эта непонятная команда будет ими проигнорирована) позволит избежать таких сбоев. На самом деле даже не обязательно добавлять базовую таблицу стилей – если вы присоединяете свою таблицу стилей с помощью @ import, то в старых броузерах документ будет отображен в соответствии с их внутренней таблицей стилей.
  • jQuery plugin для использования SVG графики. Часть 1
    0
    Правило @ import позволяет импортировать содержимое CSS-файла в текущую стилевую таблицу.
  • Будущее веб-разработок CAD систем
    –1
    Создать 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

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

  • Будущее веб-разработок CAD систем
    0
    Сейчас никак, а где то через 25 лет думаю также как и в DWG.
    Веб-технологии не топчутся на месте.
    В Википедии пишут что в AutoCAD 2014 появилось JavaScript API.
  • Будущее веб-разработок CAD систем
    0
    Формат DWG — это не просто линии, штриховки и т.п. Это еще и ряд технологий вокруг этого формата — прокси-объекты и XDATA, внешние ссылки, пространство модели-листа, блоки и динамические блоки, поддержка растров и PDF, слои и комбинации слоев, автозаполняемые поля, параметризация и зависимости, 3D данные…

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

    такой же пример из Компас-графика (скан), я понимаю что ещё мой пример в SVG далёк до идеальности, будем усовершенствовать
  • Будущее веб-разработок CAD систем
    0
    Не буду спорить, что можно сделать отдельный формат на основе SVG

    тоже так думаю, и продумываю варианты
  • Будущее веб-разработок CAD систем
    0
    1. Используя CSS можно иметь какие угодно стили.
    2. Пробовал вставлять, видимо редактор такого не предусматривает
  • Будущее веб-разработок CAD систем
    0
    в DXF мы легко отфильтруем по координатам те объекты, которые должны быть видны на экране

    Таким же алгоритмом отфильтруем по координатам объекты и в SVG. Мы имеем те же координаты и объекты.
  • Будущее веб-разработок CAD систем
    0
    На форуме сайта DWG.RU появился призыв:
    Ни одна браузерная игра не обходится без багов. Причем, баги зависят от браузера, от составляющих компа, от его старинности и т.д. Товарищи, не надо онлайн CAD делать, пожалуйста…
  • Будущее веб-разработок CAD систем
    0
    Думаю SVG лучше любого DWG тем что проще для программирования, является частью DOM.
    Начал серию статей "Чертежи в SVG формате. Часть 1 — Черновик стандарта (обновляется)" чтобы слезли с DWG?
  • Чертежи в SVG формате. Часть 3. — Черновик стандарта
    0
    Незнаю правельно ли понял я Вас, пример кода и демонстрационный пример
    <path d="M0,-25A25,25 0 0 1 13.4178,21.0941L80.5067,126.5649A150,150 0 0 0 0,-150z" stroke="red" fill="red"/>
    <path d="M13.4178,21.0941A25,25 0 0 1 -12.4329,21.6892L-74.5973,130.1355A150,150 0 0 0 80.5067,126.5649z" stroke="blue" fill="blue"/>
    <path d="M-12.4329,21.6892A25,25 0 0 1 -22.9638,9.8826L-137.7826,59.2956A150,150 0 0 0 -74.5973,130.1355z" stroke="orange" fill="orange"/>

  • Чертежи в SVG формате. Часть 4. — Черновик стандарта
    +1
    Я так уже и сделал, сразу не понял что к чему
    @font-face {
    font-family: 'OpenGOST Type A';
    src:
    local('OpenGostTypeA'),
    url('../fonts/OpenGostTypeA-Regular.ttf') format('truetype');
    }
    
    text {fill: black; font-family: OpenGOST Type A ; font-weight: 400; text-decoration: none;}
    
  • Чертежи в SVG формате. Часть 4. — Черновик стандарта
    0
    В примере в CSS дописал шрифт OpenGOST Type A
  • Чертежи в SVG формате. Часть 4. — Черновик стандарта
    –4
    Шрифты для Windows можно скачать с сайта «DWG.RU»
  • Чертежи в SVG формате. Часть 4. — Черновик стандарта
    –2
    В демонстрации использовал шрифт GOST type A, и Symbol type A. Установите их.
  • Чертежи в SVG формате. Часть 2. — Черновик стандарта
    0
    Вы правы
    .lt1 — .line-type1
    Постоянно хочу код уменьшить чтоб не заниматься потом оптимизацией как здесь Оптимизация / сжатие SVG-изображений
  • Чертежи в SVG формате. Часть 3. — Черновик стандарта
    0
    можно попробовать тег path. Нарисовать две дуги почти замкнутые на окружность и заштриховать область между ними. Покажите скан что у Вас выходит и что хотите сделать.
  • Чертежи в SVG формате. Часть 3. — Черновик стандарта
    +1
    в CSS прописано
    line, rect, circle, ellipse, path, text {
      vector-effect: non-scaling-stroke;
    }

    Возможно свойство vector-effect в Opera не поддерживается пока.
    Тестирую в Firefox и Chrome.
  • Чертежи в SVG формате. Часть 2. — Черновик стандарта
    0
    Вы не ошиблись, при тестировании сравниваю чертёж в SVG с чертежом в Компас-графике. В перспективе планирую создать библиотеку для Компас-графика импорт/экспорт в SVG.
  • Comment from a drafted post.
  • Чертежи в SVG формате. Часть 2. — Черновик стандарта
    0
    поправил доменную зону :)
  • Comment from a drafted post.
  • Чертежи в SVG формате. Часть 1 — Черновик стандарта
    0
    в примере для видов использовался масштаб 1:4

    <svg x="50" y="7" width="150" height="162" viewBox="-25 -200 600 648">

    width=«150» height=«162» viewBox="…… 600 648" — соотношение величин задаёт масштаб отображения вида на листе

    шестеренку от наручных часов можно нарисовать на том же формате листа, только к виду применить масштаб 20:1

    <svg x="50" y="7" width="150" height="162" viewBox="-0.3 -2.5 7.5 8.1">
  • Чертежи в SVG формате. Часть 1 — Черновик стандарта
    0
    если использовать миллиметры то необходимо всюду использовать одну единицу измерения. В свойстве viewBox тега svg использование миллиметров приводят к багу (рисунок не масштабируется в неодходимый размер на экране).
    Пример штампа чертежа с использованием единицы измерения мм
  • Чертежи в SVG формате. Часть 1 — Черновик стандарта
    0
    пишите что подрихтовать, всё рассмотрю и обсудим
  • Чертежи в SVG формате. Часть 1 — Черновик стандарта
    –2
    цитируя стандарт — (очень желательно, но не обязательно)

    одна из причин желание минимизировать сам код чертежа

  • Чертежи в SVG формате. Часть 1 — Черновик стандарта
    0
    тестирую только под Firefox и Chrome, возможно в будущем SVG заменит DXF для CAD систем.
  • Чертежи в SVG формате. Часть 1 — Черновик стандарта
    0
    <path class="atr2" d="M140,101.34 C144.696,86.7859 152.303,75.3664 162.822,67.0820 C167.996,63.0066 174.363,58.9944 180.459,57.1320 C194.3626,52.8843 213.0561,57.1320 225.5589,67.0820 C232.5067,72.6114 241.8569,77.1221 250,77.9937 C263.3438,79.4220 275.9399,63.2633 290.0,60 C299.5142,57.7918 310.4253,54.6301 319.5409,57.1320 C325.7604,58.8390 332.0035,63.0066 337.1780,67.0820 C347.6966,75.3664 353.3294,89.2060 360,101.3405"/>

    код кривой из нижнего вида примера чертежа (вырез в детали тонкая чёрная волнистая линия)
  • Чертежи в SVG формате. Часть 1 — Черновик стандарта
    0
    Протестировал, окажется полезным. В плагине jQuery SVG свойство vector-effect не предусмотрено. Спасибо за подсказку.