HTML-холст эскиз против ширины заливки

Question

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

Answer 1

Вам необходимо добавить lineWidth в ваши расчеты для обводимых объектов.

Вызов fillRect(0,0,60,60) возвращает вам 60x60 поле, начинающееся с (0,0), но если вы выполняете обводку, вы должны добавить половину линииширина в каждую сторону.

так что с lineWidth 6 вызов strokeRect(0,0,60,60) действительно дает вам 66x66 поле, которое начинается с (-3,-3).

Математика может немного отличатьсяиз-за помех, но для большинства приложений вы можете игнорировать это.

Одно простое решение, которое может или не может быть реализовано в вашей программе, заключается в том, чтобы для каждого заполненного объекта вызывать fillRect AND strokeRect.Объект станет немного больше, но он будет соответствовать размеру вашего поглаженного объекта.Разумеется, этот подход полностью зависит от того, как вы до сих пор писали.