使用 FabricJS 的恒定笔划宽度矩形答案

【问题标题】：Constant stroke width rectangle with FabricJS使用 FabricJS 的恒定笔划宽度矩形
【发布时间】：2019-06-07 16:56:12
【问题描述】：

有没有什么方法可以使用 FabricJs 绘制具有恒定宽度笔划的矩形？

在我能找到的每个示例中，您都可以设置笔触宽度，但是当您调整矩形大小时，笔触会与形状一起缩放。

【问题讨论】：

@ℊαα我发现这两个小提琴与工作解决方案jsfiddle.net/jesseh77/bH93k jsfiddle.net/davidtorroija/nawLjtn8

标签： fabricjs

【解决方案1】：

我在这里玩游戏迟到了，但我想在某个地方记录一下。上面评论中分享的来自 davidtorroija (http://jsfiddle.net/davidtorroija/nawLjtn8/) 的小提琴对我来说几乎是一个完美的解决方案，但它有一个大问题。 Fabric 使用称为“cacheWidth”和“cacheHeight”的值，如果不更改这些值，最终可能会出现一些不匹配指定高度和宽度的狡猾渲染：

在不更改缓存值的情况下： https://i.gyazo.com/6cc1223444309cd55715bd81aa9dcb39.gif

更改缓存值： https://i.gyazo.com/e842b57af255460fcdbdc3533a6793e6.gif

这样的事情应该可以解决问题

// Existing code
this.width *= this.scaleX
this.height *= this.scaleY
// New code
this.cacheWidth = this.width
this.cacheHeight = this.height

【讨论】：