Как изменить размер или удалить один объект с холста, используя Javascript?

Question

Есть ли какие-либо изменения для удаления или изменения размера выбранного объекта из Canvas без изменения другого дизайна.

Например: - Я нарисовал круги (только для справки Circle1, circle2, circle3).circle1 будет внизу двух других кругов.Теперь я хочу удалить circle2 или изменить размер.Но это не должно влиять на другие круги.

И если есть какие-либо изменения, делайте это без использования четкого метода Canavas.

Это должно работать как-то вроде дизайна PowerPoint, просто рисуйте, изменяйте размеры и удаляйте.

Answer 1

Я не думаю, что это возможно, canvas насколько я знаю, это растровый объект, и все, что вы рисуете на нем, обновляет изображение.

Если вам нравится использовать кружок в качестве объекта, вам, вероятно, следует обратить внимание на SVG

Образец цитирования: «После того, как прямоугольник нарисован, тот факт, что он нарисован, забывается системой. Если бы его положение было изменено, необходимо перерисовать всю сцену, включая любые объекты, которые могли быть покрыты прямоугольником». 1009 *

Answer 2

Одной из возможностей является использование библиотеки холста, например fabric.js , которая позволяет рисовать и программно получать доступ к объектам холста . Наличие содержимого холста в виде множества объектов позволяет легко изменять эти объекты, не затрагивая ничего другого; переместить, изменить размер, удалить, клонировать, изменить свойства (цвет, прозрачность и т. д.)

Answer 3

С Canvas вы должны начать создавать свои собственные рамки. Я начал несколько простых уроков по этой теме, включая изменение размеров фигур .

Короче говоря, вам нужно будет отслеживать каждый нарисованный вами объект, чтобы вы могли перерисовывать его каждый раз, когда что-то движется.

Answer 4

Вы можете попробовать нарисовать круги на отдельных холстах.В этом случае все, что вам нужно сделать, это избавиться от элемента Canvas, содержащего сам круг.

Конечно, это означает, что вам придется использовать некоторые хитрости CSS (а именно z-index и абсолютное позиционирование) ... Это также влечет за собой некоторые накладные расходы.Это может быть приемлемо, если вы имеете дело с достаточным количеством объектов.

Я согласен с Дэвидом в отношении SVG.Это может быть хорошим вариантом.