Мыслить глобально ! (Среда разработки веб приложений )

[zub]

>>Goto мне тоже не нравится но и боятся его применять (если не переход не из цикла ) я не собираюсь ...
Применять надо там где оно хоть както оправдано, а не лепить на ровном месте непойми зачем.

>>Вопрос: что не так делаю ?
Всё как обычно. всё нетак. Еще сделай поворот.
Потом поговорим о том что перенос,масштабирование и поворот - это одно и тоже. и вместо трех разных сущностей надо делать одну - трансформацию матрицей преобразования.

Добавлено спустя 45 минут 29 секунд:
>>Завидовать мне тоже ... смеху подобно ... ага, гомерическому !
Да я бы и рад тебе позавидовать, но пока получается только посочувствовать((

>>Если это просто просто очередная подколка ... то в очередной раз мимо ...
>>Спасибо за советы... удачи ! ... и не бурчи ... ты "Зуб" а не "Язва" ...
Зря ты воспринимаешь это как подколки и бурчание. всё обосновано

[Alex2013]

>>Goto мне тоже не нравится но и боятся его применять (если не переход не из цикла ) я не собираюсь ...
Применять надо там где оно хоть както оправдано, а не лепить на ровном месте непойми зачем.

Это фрагмент кода "глобального" обработчика нажатия клавиш там еще куча кода дальше ...
"ровного места" там точно нет ...

>>Вопрос: что не так делаю ?
Всё как обычно. всё нетак. Еще сделай поворот.
Потом поговорим о том что перенос,масштабирование и поворот - это одно и тоже. и вместо трех разных сущностей надо делать одну - трансформацию матрицей преобразования.

Вот это уже ближе к полезному совету .. Но в чем смысл "великого объединения" ? Расчет все равно разный...Да, можно сделать "матричный оператор " качестве вспомогательной подпрограммы но где смысл ?
Поворота в глобальном виде у меня точно не будет (разве что для от дельных фигур можно будет задать угол как часть входящих данных как это уже сделано для градиента ( результат изменения угла пока видно только при просмотре генерируемого НТML-кода в браузере )

[olegy123]

Но в чем смысл "великого объединения" ? Расчет все равно разный...Да, можно сделать "матричный оператор " качестве вспомогательной подпрограммы но где смысл ?

Смысл глубокий. Порядок выполнения важен. Иначе поплывешь.
Если напишешь правильно - то заново "изобретешь" для себя то, что в математике зовется матричные преобразования.

Добавлено спустя 10 минут 26 секунд:
Где мультизадачность?
Пора фоново проводить трудоемкие расчеты.

[zub]

>>"ровного места" там точно нет ...
Это повод упрощать и разделять, но не для goto. Также очень сомнительно что "глобальный обработчик" должен знать о таких мелочах

>>Но в чем смысл "великого объединения" ? Расчет все равно разный...
Смысл дойдет когда напурхаешся с отдельными переносами-масштабами-поворотами. в том то и дело что расчет везде одинаковый

[Alex2013]

Многопоточность я уже пробовал сделать для поиска границ (да и в программе сервера она разумеется есть )... в принципе даже работала ... но усложнение программы и нужда отслеживать кучу коллизий в раз угробили все преимущества.
Растровыми обработками многопоточность действительность может не слабо помочь (особенно учитывая многядерность современных процессоров ) но этом проекте растровых данных довольно мало ...

>>Но в чем смысл "великого объединения" ? Расчет все равно разный...
Смысл дойдет когда напурхаешся с отдельными переносами-масштабами-поворотами. в том то и дело что расчет везде одинаковый

Возможно ты прав но у меня как я писал поворота как глобальной функции не будет
(Где ты видел в редакторе форм Лазаруса Дльфи или Хайасма хотя-бы намек на некий "поворот" ? Нету там такого ! В чуть расширенных пока в сравнении совсем остальным "графических возможностях " моего редактора "виновата" чуть хаотическая разработка программы и небольшой задел из исходного проекта "редактора иконок".. но думаю это временное явление . ).
Перемещение реализовано просто DeltaXY(CurOP,DX,DY); аналогично сделал масштаб StretchXY(CurOP,DX,DY); ...

Проблема в том , что у меня все координаты сохраняются в "пикслеях" (то есть целое число ) и любые преобразования сложнее простого перемещения неизбежно упираются в пресловутую "потерю точности" причем почти мгновенно !
(уж молчу про "сломанный зонтик" это вообще "эпик фэйл " похоже полностью нерешаемый в принципе ... если координата точки обнулилась то это "железный капут" ... можно только "отсрочить приговор" сохранив на время выбора масштаба данные исходной фигуры ... )

[zub]

Как думаешь, почему тут нет никаких зонтиков?


Добавлено спустя 11 минут 46 секунд:
>>(Где ты видел в редакторе форм Лазаруса Дльфи или Хайасма хотя-бы намек на некий "поворот" ? Нету там такого ! В чуть расширенных пока в сравнении совсем остальным
Я много чего где не видел. У тебя есть векторные элементы типа линий-полилиний... что мешает их повернуть?

[Alex2013]

Как думаешь, почему тут нет никаких зонтиков?

Думаю потому что ты всегда работаешь только с исходной фигурой ( а у меня редактор все равно рано или поздно "забывает" данные исходной фигуры) + у тебя координаты вещественные (запас точности есть ) ).
Я уже тоже могу даже на изнанку вывернуть но только пока ничего другого не рисую .
Зы
Интересно как ты вбираешь фигуру с НУЛЕВЫМ размером .... (я даже же еще не пробовал делать что-то похожее аж самому стало интересно что будет )

[olegy123]

Думаю потому что ты всегда работаешь только с исходной фигурой

Ну вообще то так должно быть - элемент должен иметь только реальные значения [мм/см/м/км], а не дисплейные.. когда тебе нужно сделать кухонных гарнитур - ты же не в пикселях метрику отдаешь на производство?

Добавлено спустя 4 минуты 12 секунд:
Матрица преобразований http://htmlbook.ru/blog/matritsa-preobrazovanii
Многие веб-разработчики игнорируют матрицу преобразований, полагая её слишком сложной для понимания и используя взамен простейшие функции для трансформации. И совершенно зря, матрица преобразований обладает широкими возможностями, вдобавок, в том или ином виде поддерживаются всеми браузерами, а значит её применение даёт кроссбраузерный код. Так что давайте разбираться, что это такое и как использовать матрицу преобразований на практике.

Изучаем матрицы трансформаций в CSS http://css-live.ru/articles/izuchaem-ma ... v-css.html

Гы-ы-ы..

[zub]

>>Интересно как ты вбираешь фигуру с НУЛЕВЫМ размером
Математически. не растрово

>>а у меня редактор все равно рано или поздно "забывает" данные исходной фигуры
ты с завидным упорством выбираешь неправильные подходы))

[Alex2013]

Новая сборка FR0004_20_5_47_4_bin.7z
Теперь можно изменить размер "элемента макета" мышкой (Зажав Alt и левую кнопку мыши при выборе фигуры )
Зы
Опыт с нулевым размером прогнозируемо провалился ("Багофчу" пока не исправил) ... Причем и при "прямом математическом " варианте выбора тоже ...То есть в моем случае просто через "прямой тычок" прямо в список команд ( видимо не верно определяются и неверно показываются границы ) Пока вижу только один выход : запретить рисование и масштабирование в "0 пространство " ( Автоматом преобразовывая ноль в единицу... причем при процессе масштабирования заметно не будет ... буфер "все починит" ) В моем случае "нулевая фигура невидимка" совершенно точно явный нонсенс ...

[Alex2013]

Версия с записью WMF
+ исправлена мелкая ошибка возникавшая при отсутствии указанной формы в элементах формы .
FR0004_20_5_47_5_bin.7z

[zub]

А зачем ты разделяешь примитивы по способу реализации? если я рисую "звездочки", то мне без разницы как они выглядят внутри - рафаэль или свг или moveto+lineto, об этом я подумаю когда буду файлик сохранять.
Прикинь, еслиб в графических редакторах при сохранении рисунка в другом формате надо было бы рисунок перерисовать)) сравнение конечно не очень - небольшие потери при смене форматов бывают, но всеже))

[Alex2013]

А зачем ты разделяешь примитивы по способу реализации? если я рисую "звездочки", то мне без разницы как они выглядят внутри - рафаэль или свг или moveto+lineto, об этом я подумаю когда буду файлик сохранять.

Просто мне важен именно код html и я должен знать, что именно используется (есть идея сделать еще и графику "на картинке" как в WYSIWYG Web Builder ) ... Хотя возможно унификация (с опциями при генерации рафаэль или свг ) и стоящая штука но реализация получается более прозрачной и простой при разделении функций.

То что там иконки одинаковые и функции похожи просто совпадение и отчасти моя лень .. На самом деле стандартной функционал SVG и рядом не стоял с возможностями рафаэль-графики да и методы генерация кода для него для в моей программе изрядно отличаются от более простых тегов с SVG . А так все скрипты "по полкам" в группах (возможно потом вообще упрячу каждую группу в свою папку ) ...

Прикинь, еслиб в графических редакторах при сохранении рисунка в другом формате надо было бы рисунок перерисовать)) сравнение конечно не очень - небольшие потери при смене форматов бывают, но всеже))

Еще раз повторяю основной исходящий формат одни Html . А вот методы создания как бы похожих элементов может быть очень разный. ( кстати похожим образом устроены многие про-редакторы веб-страниц )

(В самом деле глянь на генерируемый код

Код: Выделить всё


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML><HEAD><TITLE></TITLE>
<META content="text/html; " http-equiv=Content-Type>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<META name=GENERATOR content="MSHTML 8.00.7600.16385"><LINK rel=stylesheet
type=text/css href="Wq0001.css"><LINK rel=stylesheet
type=text/css href="index.css"></HEAD>
<BODY>

<TABLE
style="Z-INDEX: 0; POSITION: absolute; WIDTH: 100%; HEIGHT: 942px; TOP: 0px; LEFT: 1px"
id=Table1 cellSpacing=1 cellPadding=0>
  <TBODY>
   <TR>
     <TD  style="BORDER-BOTTOM: #c0c0c0 1px solid; TEXT-ALIGN: left; BORDER-LEFT: #c0c0c0 1px solid; BACKGROUND-COLOR: transparent; HEIGHT: 934px; VERTICAL-ALIGN: top; BORDER-TOP: #c0c0c0 1px solid; BORDER-RIGHT: #c0c0c0 1px solid">&nbsp;
     </TD>
   </TR>
  </TBODY>
</TABLE>



<TABLE
style="Z-INDEX: 1; POSITION: absolute; WIDTH: 678px; HEIGHT: 865px; TOP: 1px; LEFT: 22%"
id=Table2 class="Heading 1 <h1>" cellSpacing=1 cellPadding=0>
  <TBODY>
    <TD
    style="BORDER-BOTTOM: #c0c0c0 1px solid; TEXT-ALIGN: left; BORDER-LEFT: #c0c0c0 1px solid; BACKGROUND-COLOR: #ffe4c4; HEIGHT: 658px; VERTICAL-ALIGN: top; BORDER-TOP: #c0c0c0 1px solid; BORDER-RIGHT: #c0c0c0 1px solid">&nbsp;
    <br> <br>

<DIV style="Z-INDEX: 1;  POSITION: absolute; TOP:49px; LEFT:31px;">
<SPAN style="BACKGROUND-COLOR:#FFFFFF; FONT-FAMILY: default; COLOR: #000000; FONT-SIZE: 8px">0.0.0.1 Альфа начало преобразования МА RED в FORMred </SPAN>
</DIV>
<DIV style="Z-INDEX: 1;  POSITION: absolute; TOP:74px; LEFT:29px;">
<SPAN style="BACKGROUND-COLOR:#FFFFFF; FONT-FAMILY: default; COLOR: #000000; FONT-SIZE: 8px">0.0.0.2 Альфа Жестокая "рыба" но концепция растет  .</SPAN>
</DIV>
<DIV style="Z-INDEX: 1;  POSITION: absolute; TOP:101px; LEFT:31px;">
<SPAN style="BACKGROUND-COLOR:#FFFFFF; FONT-FAMILY: default; COLOR: #000000; FONT-SIZE: 8px">0.0.0.3 Альфа расширил запись элементов + настроил чтение из ini-файла</SPAN>
</DIV>
<DIV style="Z-INDEX: 1;  POSITION: absolute; TOP:129px; LEFT:31px;">
<SPAN style="BACKGROUND-COLOR:#FFFFFF; FONT-FAMILY: default; COLOR: #000000; FONT-SIZE: 8px">0.0.0.4 добавил загрузку начальных значений в инспектор элементов . </SPAN>
</DIV>
<INPUT style="Z-INDEX: 1;  POSITION: absolute; TOP:177px; LEFT:34px;FONT-FAMILY: ; COLOR: #FF0000; FONT-SIZE: 12px"onclick='document.location = "http://lib.ru"' id=Button   value="БИБЛИОТЕКА 1" type=submit name="">

<DIV style="Z-INDEX: 1;  POSITION: absolute; TOP:238px; LEFT:33px;">
<SPAN style="FONT-FAMILY: ; COLOR: #000080; FONT-SIZE: 12px"><a href="http://google.com">ГУГЛ В ПОМОЩЬ !</a></SPAN>
</DIV>
<DIV style="Z-INDEX: 1;  POSITION: absolute; TOP:301px; LEFT:7px;">
<SPAN style="BACKGROUND-COLOR:#FFFF00; FONT-FAMILY: default; COLOR: #000000; FONT-SIZE: 9px">  0.0.0.4 12 Добавил  обратную  трансляцию(OТ)  данных из инспектора элементов в команды. </SPAN>
</DIV>
<DIV style="Z-INDEX: 1;  POSITION: absolute; TOP:342px; LEFT:15px;">
<SPAN style="BACKGROUND-COLOR:#800000; FONT-FAMILY: default; COLOR: #FFFFFF; FONT-SIZE: 8px">0.0.0.4 13 Добавил ЖТ для управления с помощью стрелок.</SPAN>
</DIV>
<DIV style="Z-INDEX: 1;  POSITION: absolute; TOP:382px; LEFT:33px;">
<SPAN style="FONT-FAMILY: ; COLOR: #000080; FONT-SIZE: 15px"><a href="http://google.com">ГУГЛ В ПОМОЩЬ !</a></SPAN>
</DIV>
<DIV style="Z-INDEX: 1;  POSITION: absolute; TOP:449px; LEFT:72px;">
<SPAN style="BACKGROUND-COLOR:#FF0000; FONT-FAMILY: ; COLOR: #000000; FONT-SIZE: 29px">Загадочный HTML </SPAN>
</DIV>
<DIV style="Z-INDEX: 1;  POSITION: absolute; TOP:492px; LEFT:70px;">
<SPAN style="BACKGROUND-COLOR:#FFFF00; FONT-FAMILY: Segoe Script; COLOR: #00FF00; FONT-SIZE: 22px">Загадочный HTML </SPAN>
</DIV>
<DIV style="Z-INDEX: 1;  POSITION: absolute; TOP:159px; LEFT:448px;">
<SPAN style="BACKGROUND-COLOR:#000000; FONT-FAMILY: ; COLOR: #FFFF00; FONT-SIZE: 15px">09:54:12</SPAN>
</DIV>
<section id="raphael-js"> <div style="POSITION: absolute; WIDTH: 100%; HEIGHT: 100%; TOP: 0px; LEFT: 0%" id="rsr">
<script src="raphael.js" type="text/javascript"></script>
<script type="text/javascript"> window.onload=function(b) {
var rsr = Raphael('rsr', '100%', '100%');var layer1 = rsr.set();
rsr.rect( 1, 1 ,678 ,720 ).attr({'stroke-width': 0 ,'fill': '90-#00FF00-#008080'});
rsr.rect( 179, 176 ,34 ,25 ).attr({fill: "#FF0000 ", stroke: "#000000","stroke-opacity": "- "});
rsr.rect( 202, 238 ,30 ,19 ).attr({fill: "#FFFFFF ", stroke: "#000000","stroke-opacity": "- "});
rsr.rect( 19, 380 ,318 ,29 ).attr({fill: "#FFFFFF ", stroke: "#000000","stroke-opacity": "- "});
rsr.rect( 14, 2 ,474 ,4 ).attr({fill: "#FF0000 ", stroke: "#000000","stroke-opacity": "- "});
rsr.rect( 26, 419 ,443 ,102 ).attr({fill: "#FF0000 ", stroke: "#000000","stroke-opacity": "- "});
rsr.ellipse( 366, 229 ,71 ,63 ).attr({fill: "#008000 ", stroke: "#00FF00","stroke-opacity": "- "});
rsr.ellipse( 365, 230 ,46 ,44 ).attr({fill: "#00FF00 ", stroke: "#FFFF00","stroke-opacity": "- "});
rsr.path("M 320,228 l 92,0 ").attr({fill: "#00FF00 ", stroke: "#FFFF00","stroke-opacity": "- "});
rsr.path("M 365,229 l 0,48 ").attr({fill: "#00FF00 ", stroke: "#FFFF00","stroke-opacity": "- "});
rsr.path("M 334,260 l 10,-34 ").attr({fill: "#00FF00 ", stroke: "#FFFF00","stroke-opacity": "- "});
rsr.path("M 376,228 l 22,30 ").attr({fill: "#00FF00 ", stroke: "#FFFF00","stroke-opacity": "- "});
rsr.ellipse( 481, 165 ,29 ,29 ).attr({fill: "#8000FF ", stroke: "#FFFF00","stroke-opacity": "- "});
rsr.rect( 436, 145 ,93 ,41 ).attr({fill: "#000000 ", stroke: "#FFFF00","stroke-opacity": "- "});
rsr.path("M 386,350 l 91,0 ").attr({fill: "#FFFFFF ", stroke: "#FF0000","stroke-opacity": "- "});
rsr.path("M 477,350 l -91,59 ").attr({fill: "#FFFFFF ", stroke: "#FF0000","stroke-opacity": "- "});
rsr.path("M 431,321 l -45,88 ").attr({fill: "#FFFFFF ", stroke: "#FF0000","stroke-opacity": "- "});
rsr.path("M 431,321 l 46,88 ").attr({fill: "#FFFFFF ", stroke: "#FF0000","stroke-opacity": "- "});
rsr.path("M 477,409 l -91,-59 ").attr({fill: "#FFFFFF ", stroke: "#FF0000","stroke-opacity": "- "});
rsr.path("M 388,352 l 91,0 ").attr({fill: "#FFFFFF ", stroke: "#FF0000","stroke-opacity": "- "});
rsr.path("M 479,352 l -91,59 ").attr({fill: "#FFFFFF ", stroke: "#FF0000","stroke-opacity": "- "});
rsr.path("M 433,323 l -45,88 ").attr({fill: "#FFFFFF ", stroke: "#FF0000","stroke-opacity": "- "});
rsr.path("M 433,323 l 46,88 ").attr({fill: "#FFFFFF ", stroke: "#FF0000","stroke-opacity": "- "});
rsr.path("M 479,411 l -91,-59 ").attr({fill: "#FFFFFF ", stroke: "#FF0000","stroke-opacity": "- "});
rsr.path("M 390,354 l 91,0 ").attr({fill: "#FFFFFF ", stroke: "#FF0000","stroke-opacity": "- "});
rsr.path("M 481,354 l -91,59 ").attr({fill: "#FFFFFF ", stroke: "#FF0000","stroke-opacity": "- "});
rsr.path("M 435,325 l -45,88 ").attr({fill: "#FFFFFF ", stroke: "#FF0000","stroke-opacity": "- "});
rsr.path("M 435,325 l 46,88 ").attr({fill: "#FFFFFF ", stroke: "#FF0000","stroke-opacity": "- "});
rsr.path("M 481,413 l -91,-59 ").attr({fill: "#FFFFFF ", stroke: "#FF0000","stroke-opacity": "- "});
rsr.path("M 33,276 l 236,0 0,0 0,-110 0,0 64,0 0,0  ").attr({fill: "transparent", stroke: "#000000","stroke-opacity": "-"});
rsr.path("M 478,209 l -30,32 0,0 36,32 0,0 25,-27 0,0 -23,-20 0,0 -19,18 0,0 16,13 0,0 14,-13 0,0  ").attr({fill: "transparent", stroke: "#008000","stroke-opacity": "-"});
rsr.path("M 478,211 l -30,32 0,0 36,32 0,0 25,-27 0,0 -23,-20 0,0 -19,18 0,0 16,13 0,0 14,-13 0,0  ").attr({fill: "transparent", stroke: "#008000","stroke-opacity": "-"});
rsr.path("M 478,213 l -30,32 0,0 36,32 0,0 25,-27 0,0 -23,-20 0,0 -19,18 0,0 16,13 0,0 14,-13 0,0  ").attr({fill: "transparent", stroke: "#008000","stroke-opacity": "-"});
rsr.path("M 48,215 l -32,49 0,0 246,1 0,0 -20,-50 0,0  Z").attr({fill: "#FFFFFF ", stroke: "#00FF00","stroke-opacity": "-"});
rsr.path("M 50,217 l -32,49 0,0 246,1 0,0 -20,-50 0,0  Z").attr({fill: "#FFFFFF ", stroke: "#00FF00","stroke-opacity": "-"});
rsr.path("M 46,213 l -32,49 0,0 246,1 0,0 -20,-50 0,0  Z").attr({fill: "#FFFFFF ", stroke: "#00FF00","stroke-opacity": "-"});
rsr.path("M 440,61 l 28,-40 ").attr({fill: "#FFFFFF ", stroke: "#000000","stroke-opacity": "- "});
rsr.path("M 473,55 l -42,-26 ").attr({fill: "#FFFFFF ", stroke: "#000000","stroke-opacity": "- "});
rsr.path("M 477,27 l 5,49 ").attr({fill: "#FFFFFF ", stroke: "#000000","stroke-opacity": "- "});
rsr.path("M 419,38 l 58,-11 ").attr({fill: "#FFFFFF ", stroke: "#000000","stroke-opacity": "- "});
rsr.path("M 431,29 l -12,9 ").attr({fill: "#FFFFFF ", stroke: "#000000","stroke-opacity": "- "});
rsr.path("M 440,61 l -9,-32 ").attr({fill: "#FFFFFF ", stroke: "#000000","stroke-opacity": "- "});
rsr.path("M 473,55 l -33,6 ").attr({fill: "#FFFFFF ", stroke: "#000000","stroke-opacity": "- "});
rsr.path("M 482,76 l -9,-21 ").attr({fill: "#FFFFFF ", stroke: "#000000","stroke-opacity": "- "});
rsr.path("M 468,21 l 9,6 ").attr({fill: "#FFFFFF ", stroke: "#000000","stroke-opacity": "- "});
rsr.path("M 431,29 l 37,-8 ").attr({fill: "#FFFFFF ", stroke: "#000000","stroke-opacity": "- "});
rsr.path("M 473,55 l -5,-34 ").attr({fill: "#FFFFFF ", stroke: "#000000","stroke-opacity": "- "});
rsr.path("M 434,84 l 48,-8 ").attr({fill: "#FFFFFF ", stroke: "#000000","stroke-opacity": "- "});
rsr.path("M 419,38 l 15,46 ").attr({fill: "#FFFFFF ", stroke: "#000000","stroke-opacity": "- "});
rsr.path("M 440,61 l -6,23 ").attr({fill: "#FFFFFF ", stroke: "#000000","stroke-opacity": "- "});

rsr.path("M 441,60 l 26,-40 ").attr({fill: "#FFFFFF ", stroke: "#FF0000","stroke-opacity": "- "});
rsr.path("M 473,54 l -42,-25 ").attr({fill: "#FFFFFF ", stroke: "#FF0000","stroke-opacity": "- "});
rsr.path("M 475,28 l 7,47 ").attr({fill: "#FFFFFF ", stroke: "#FF0000","stroke-opacity": "- "});
rsr.path("M 419,41 l 56,-13 ").attr({fill: "#FFFFFF ", stroke: "#FF0000","stroke-opacity": "- "});
rsr.path("M 431,29 l -12,12 ").attr({fill: "#FFFFFF ", stroke: "#FF0000","stroke-opacity": "- "});
rsr.path("M 441,60 l -10,-31 ").attr({fill: "#FFFFFF ", stroke: "#FF0000","stroke-opacity": "- "});
rsr.path("M 473,54 l -32,6 ").attr({fill: "#FFFFFF ", stroke: "#FF0000","stroke-opacity": "- "});
rsr.path("M 482,75 l -9,-21 ").attr({fill: "#FFFFFF ", stroke: "#FF0000","stroke-opacity": "- "});
rsr.path("M 467,20 l 8,8 ").attr({fill: "#FFFFFF ", stroke: "#FF0000","stroke-opacity": "- "});
rsr.path("M 431,29 l 36,-9 ").attr({fill: "#FFFFFF ", stroke: "#FF0000","stroke-opacity": "- "});
rsr.path("M 473,54 l -6,-34 ").attr({fill: "#FFFFFF ", stroke: "#FF0000","stroke-opacity": "- "});
rsr.path("M 436,84 l 46,-9 ").attr({fill: "#FFFFFF ", stroke: "#FF0000","stroke-opacity": "- "});
rsr.path("M 419,41 l 17,43 ").attr({fill: "#FFFFFF ", stroke: "#FF0000","stroke-opacity": "- "});
rsr.path("M 441,60 l -5,24 ").attr({fill: "#FFFFFF ", stroke: "#FF0000","stroke-opacity": "- "});

rsr.path("M 369,66 l 28,-40 ").attr({fill: "#FFFFFF ", stroke: "#000000","stroke-opacity": "- "});
rsr.path("M 402,60 l -42,-26 ").attr({fill: "#FFFFFF ", stroke: "#000000","stroke-opacity": "- "});
rsr.path("M 406,32 l 5,49 ").attr({fill: "#FFFFFF ", stroke: "#000000","stroke-opacity": "- "});
rsr.path("M 348,43 l 58,-11 ").attr({fill: "#FFFFFF ", stroke: "#000000","stroke-opacity": "- "});
rsr.path("M 360,34 l -12,9 ").attr({fill: "#FFFFFF ", stroke: "#000000","stroke-opacity": "- "});
rsr.path("M 369,66 l -9,-32 ").attr({fill: "#FFFFFF ", stroke: "#000000","stroke-opacity": "- "});
rsr.path("M 402,60 l -33,6 ").attr({fill: "#FFFFFF ", stroke: "#000000","stroke-opacity": "- "});
rsr.path("M 411,81 l -9,-21 ").attr({fill: "#FFFFFF ", stroke: "#000000","stroke-opacity": "- "});
rsr.path("M 397,26 l 9,6 ").attr({fill: "#FFFFFF ", stroke: "#000000","stroke-opacity": "- "});
rsr.path("M 360,34 l 37,-8 ").attr({fill: "#FFFFFF ", stroke: "#000000","stroke-opacity": "- "});
rsr.path("M 402,60 l -5,-34 ").attr({fill: "#FFFFFF ", stroke: "#000000","stroke-opacity": "- "});
rsr.path("M 363,89 l 48,-8 ").attr({fill: "#FFFFFF ", stroke: "#000000","stroke-opacity": "- "});
rsr.path("M 348,43 l 15,46 ").attr({fill: "#FFFFFF ", stroke: "#000000","stroke-opacity": "- "});
rsr.path("M 369,66 l -6,23 ").attr({fill: "#FFFFFF ", stroke: "#000000","stroke-opacity": "- "});

rsr.path("M 370,65 l 26,-40 ").attr({fill: "#FFFFFF ", stroke: "#FF0000","stroke-opacity": "- "});
rsr.path("M 402,59 l -42,-25 ").attr({fill: "#FFFFFF ", stroke: "#FF0000","stroke-opacity": "- "});
rsr.path("M 404,33 l 7,47 ").attr({fill: "#FFFFFF ", stroke: "#FF0000","stroke-opacity": "- "});
rsr.path("M 348,46 l 56,-13 ").attr({fill: "#FFFFFF ", stroke: "#FF0000","stroke-opacity": "- "});
rsr.path("M 360,34 l -12,12 ").attr({fill: "#FFFFFF ", stroke: "#FF0000","stroke-opacity": "- "});
rsr.path("M 370,65 l -10,-31 ").attr({fill: "#FFFFFF ", stroke: "#FF0000","stroke-opacity": "- "});
rsr.path("M 402,59 l -32,6 ").attr({fill: "#FFFFFF ", stroke: "#FF0000","stroke-opacity": "- "});
rsr.path("M 411,80 l -9,-21 ").attr({fill: "#FFFFFF ", stroke: "#FF0000","stroke-opacity": "- "});
rsr.path("M 396,25 l 8,8 ").attr({fill: "#FFFFFF ", stroke: "#FF0000","stroke-opacity": "- "});
rsr.path("M 360,34 l 36,-9 ").attr({fill: "#FFFFFF ", stroke: "#FF0000","stroke-opacity": "- "});
rsr.path("M 402,59 l -6,-34 ").attr({fill: "#FFFFFF ", stroke: "#FF0000","stroke-opacity": "- "});
rsr.path("M 365,89 l 46,-9 ").attr({fill: "#FFFFFF ", stroke: "#FF0000","stroke-opacity": "- "});
rsr.path("M 348,46 l 17,43 ").attr({fill: "#FFFFFF ", stroke: "#FF0000","stroke-opacity": "- "});
rsr.path("M 370,65 l -5,24 ").attr({fill: "#FFFFFF ", stroke: "#FF0000","stroke-opacity": "- "});

layer1.attr({'id': 'layer1','name': 'layer1'});
var rsrGroups = [layer1]; }
</script>
</div>
</section>
<div style="BACKGROUND-COLOR: ##FFFFFF; POSITION: absolute; TOP:547px; LEFT:27px; width:152px;height:102px;" ><img style=" top:0px; left:0px; width: 100%; height: 100%;"src="pic_DRW.jpg" id="Image1" alt=""> </div>
<div style="BACKGROUND-COLOR: ##FFFFFF; POSITION: absolute; TOP:547px; LEFT:191px; width:152px;height:102px;" ><img style=" top:0px; left:0px; width: 100%; height: 100%;"src="pic_DRW.jpg" id="Image1" alt=""> </div>
<div style="BACKGROUND-COLOR: ##FFFFFF; POSITION: absolute; TOP:547px; LEFT:353px; width:152px;height:102px;" ><img style=" top:0px; left:0px; width: 100%; height: 100%;"src="pic_DRW.jpg" id="Image1" alt=""> </div>

       
    </TD>
    </TR>
</TBODY>
</TABLE>


</BODY></HTML>



Секция

Код: Выделить всё

<section id="raphael-js"> <div style="POSITION: absolute; WIDTH: 100%; HEIGHT: 100%; TOP: 0px; LEFT: 0%" id="rsr">
<script src="raphael.js" type="text/javascript"></script>
<script type="text/javascript"> window.onload=function(b) {
...
layer1.attr({'id': 'layer1','name': 'layer1'});
var rsrGroups = [layer1]; }
</script>


(которая между прочим как видно из кода вообще отдельная javascript function)
Собирается по всему файлу где примитивы изначально расположены в произвольном порядке .

А SVG в моем исполнении просто набор отдельных тегов ..

Код: Выделить всё

<svg style=" POSITION: absolute; TOP:0px; LEFT:0px;"><line x1="73" y1="130" x2="326" y2="130" stroke-width="1" stroke="#000000"/></svg>
...
<svg style=" POSITION: absolute; TOP:0px; LEFT:0px;"><line x1="326" y1="130" x2="73" y2="285" stroke-width="1" stroke="#000000"/></svg>
<svg style=" POSITION: absolute; TOP:0px; LEFT:0px;"><line x1="199" y1="53" x2="73" y2="285" stroke-width="1" stroke="#000000"/></svg>
<svg style=" POSITION: absolute; TOP:0px; LEFT:0px;"><line x1="199" y1="53" x2="326" y2="285" stroke-width="1" stroke="#000000"/></svg>
<svg style=" POSITION: absolute; TOP:0px; LEFT:0px;"><line x1="326" y1="285" x2="73" y2="130" stroke-width="1" stroke="#000000"/></svg>


)

[vitaly_l]

style=" POSITION: absolute; TOP:0px; LEFT:0px;"

Все style - лучше вынести в CSS, это в 1000 раз сократит объём ваших файлов по сети.

[Alex2013]

Все style - лучше вынести в CSS, это в 1000 раз сократит объём ваших файлов по сети.

О да в теории подобное замечание имеет смысл ... Но на практике во первых мне придется писать два файла ( в одном файле это по моему моветон хотя возможно я и ошибаюсь ) .. даже если файл с CSS будет одни на несколько страниц это не слабо все усложнит ... а во вторых, как я не раз писал, я все еще сильно плаваю в html и быстрого прогресса ждать не приходится .. бо красота и даже размер кода пока совсем не актуальны (у меня там еще множество проблем даже просто с аутентичным показом того, что я рисую в браузере ) А еще посмотри, что генерируют многие профессиональный редактор и удивись ... Кстати, многие теги напрямую с мясом выдраны из кода, что генерируется именно в них ...
Плюс я все-же не хочу совсем терять читабельность кода, которая точно станет совсем уж плохой при чрезмерном использовании CSS ...
Зы
И вообще сейчас занят другими ветками проекта ( например утилитой "комбинатор" которая пишется в отличии от "конструктора" полностью с нуля ) и написанием веб-приложений на том "что есть" (то есть с текущей версией сервера) и "конструктор" пока использую только для "рисования" самых простых "экранов- заставок" ....