У меня есть следующий код для рисования фигур (в основном используется для прямоугольников), но функции рисования HTML5, похоже, рисуют границы с их толщиной, центрированной по указанным линиям. Я хотел бы иметь границу за пределами поверхности формы, и я в недоумении.
Path.prototype.trace = function(elem, closePath) {
sd.context.beginPath();
sd.context.moveTo(this.getStretchedX(0, elem.width), this.getStretchedY(0, elem.height));
sd.context.lineCap = "square";
for(var i=1; i<this.points.length; ++i) {
sd.context.lineTo(this.getStretchedX(i, elem.width), this.getStretchedY(i, elem.height));
}
if(closePath) {
sd.context.lineTo(this.getStretchedX(0, elem.width), this.getStretchedY(0, elem.height));
}
}
getStrechedX и getStretchY возвращают координаты n-й вершины, как только форма применяется к заданной ширине, высоте и смещению элемента.
Благодаря ответу Кена Фирстенберга у меня это работает для прямоугольника, но это решение, к сожалению, не применимо к другим формам.
Здесь я нарисовал две «широкие» границы, одна из которых вычитала половину ширины линии для каждой позиции, а другая добавляла. Это не работает (как и ожидалось), потому что толстые линии будут только сверху и слева в одном случае, под и справа в другом, а не «вне» формы. Вы также можете увидеть белую область вокруг склона.
Я попытался выяснить, как заставить вершины вручную рисовать путь для толстой границы (используя fill()
вместо stroke()
).
Но оказывается, я все еще сталкиваюсь с той же проблемой: как программно определить, находится ли ребро внутри или снаружи. Это потребует некоторой тригонометрии и тяжелого алгоритма. Для целей моей текущей работы это слишком большая проблема. Я хотел использовать это, чтобы нарисовать карту здания. Стены комнаты должны быть нарисованы за пределами заданных размеров, но пока я буду придерживаться отдельных наклонных стен.