Как сделать аналог автокада на html/css?

Question

[Евгений Блинков]

В самом общем смысле. Достаточно 2d. Только произвольное количество слоёв, каждый слой должен быть бесконечным, экран устройства - "окно", которое смотрит на них сверху. Далее нужно будет вертеть их относительно какой-нибудь точки на экране , менять масштаб, но мне нужна самая основа. Мне кажется, это просто, но я туплю и не могу сообразить как сделать это, помогите мне, пожалуйста.

Answer 1

[Антон Антон]

кажется, можно сделать на чем-то типа vue манипулируя svg

Comments

[Евгений Блинков]

Вы правы, да я так и планирую. Но я не могу сообразить как мне сделать основной каркас всего этого хозяйства. Вот, например, слои. Каждый слой должен быть узлом html, например, div, а svg должны быть его дочерними элементами? А может быть этого не надо и принадлежность к слою каждого объекта svg должна быть, например, в атрибутах этого svg? Или ещё как-то? Как в этой связи реализовать масштаб и повороты? Я не имею в виду как конкретно, а как в общем. То есть мне нужна идея или концепция, а не конкретный пример реализации - с этим я справлюсь и сам.

[Антон Антон]

Слои есть внутри svg (тег g), "окно" можно двигать через viewBox да и вообще много чего есть. и масштаб и повороты/смещения для каждого элемента (атрибут transform), включая группу (тот самый тег g)

советую изучить https://developer.mozilla.org/en-US/docs/Web/SVG
и пример манипуляции svg на vue https://vuejs.org/examples/#svg

[Евгений Блинков]

Антон Антон, Большое спасибо, помог Ваш совет, особенно это: "советую изучить https://developer.mozilla.org/en-US/docs/Web/SVG", оказалось, что я просто плохо знаю SVG, а если покопаться, то там есть всё, что мне нужно)

Answer 2

[Александр]

Все можно написать, было бы желание и время:
https://github.com/jscad/OpenJSCAD.org

Comments

[Евгений Блинков]

Благодарю Вас за такое интересное решение, но для моей ситуации оно слишком сложное. К сожалению, скорее всего мне придётся писать всё самому, вряд ли удастся найти что-то подходящее. Я наверно плохо сформулировал что мне нужно. Автокад - это слишком сложно, я использовал его как наиболее понятный пример как это должно быть - экран и слои. Вот, я ещё придумал как можно назвать то, что я хочу - онлайн карта, на которой можно что-то нарисовать со слоями. Например, берём один слой, загружаем туда скрин карты. Потом на другом слое создаём какие-то объекты (контуры), пользуясь ранее загруженной подложкой с картой. Так вот я не могу понять как мне сделать вот эту структуру с экраном и слоями на html/css. Извините, что так путано формулирую, сам не понимаю до конца.

[Александр]

OpenLayers

https://github.com/SVG-Edit/svgedit