@romanpostovalov
Developer

Как конвертировать фигуры canvas из одной системы координат в другую при масштабирование ширины и высоты?

Я пытаюсь перенести фигуры polygon из SVG в Canvas 2d, имеем такой SVG в контейнере

<div class="canvas" style="width: 8000px; height: 8000px; background-color: rgb(201, 212, 232); transform: translate3d(-3068px, -3738px, 0px);">
<svg version="1.1" height="100%" width="100%" xmlns="http://www.w3.org/2000/svg" style="overflow-x: hidden; overflow-y: hidden;">
<polygon points="0,0 555,0 555,548 165.66666666666652,548 165.66666666666652,283.16666666666697 0,283.16666666666697 0,0" etype="polygon" transform="translate(3750,3750)" fill-opacity="1"></polygon>
<polygon points="306,-210.66666666666697 471.6666666666665,-210.66666666666697 471.6666666666665,54.16666666666606 306,54.16666666666606 306,-210.66666666666697" etype="polygon" transform="translate(3444,4243.833333333334)" fill-opacity="1"></polygon>
</svg>
</div>

Затем я создаю canvas c такими же размерами 8000 на 8000
<canvas id='canvas' width="8000" height="8000"></canvas>
в который и рисую эти 2 полигона , для каждого из них я смещаю систему координат ctx.translate(x0, y0); как указано в transform="translate(3750,3750)" и все отрисовывается как задумано.

Вопрос, если мне надо размер полотна canvas скалировать, например 800 на 600, как при этом пересчитать координаты начала оси и точки всей фигуры?

Какую формулу тут лучше использовать, что то мне подсказывает, что здесь надо перемещать всю фигуру и перерисовывать заново, простое скалирование aspect ratio как при crop image вряд ли поможет?
  • Вопрос задан
  • 45 просмотров
Пригласить эксперта
Ответы на вопрос 1
@MamaLuyba
Я при изменении размера канваса просто изменял и его, и фигуры через scale. Не помню, были ли там проблемы с позиционированием фигур, но в итоге все норм работало (если говорить про изменение от большего к меньшему).
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы