Имам следния код за рисуване на фигури (използван главно за правоъгълници), но изглежда, че функциите за рисуване на 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 и getStretchedY връщат координатите на n-тия връх, след като формата е приложена към зададена ширина, височина и позиция на отместване на елемента.
Благодарение на отговора на Кен Фирстенберг го накарах да работи за правоъгълник, но това решение за съжаление не може да се приложи към други форми.
Тук начертах две "широки" граници, като една изважда половината от ширината на линията за всяка позиция, а друга добавя. Не работи (както се очаква), защото само ще постави дебелите линии отгоре и отляво в един случай, под и отдясно в друг - не "извън" формата. Можете също да видите бяла зона около склона.
Опитах се да разбера как мога да накарам върховете да начертаят ръчно пътя за дебелата граница (използвайки fill()
вместо stroke()
).
Но се оказва, че все още се сблъсквам със същия проблем: как програмно да определя дали ръбът е отвътре или отвън. Това ще изисква малко тригонометрия и тежък алгоритъм. За целите на сегашната ми работа това е твърде голям проблем. Исках да използвам това, за да начертая карта на сграда. Стените на помещението трябва да бъдат начертани извън дадените размери, но засега ще се придържам към самостоятелни наклонени стени.