您现在的位置是:首页 > Javascript
当前栏目
Fabric.js 限制边框宽度缩放
2023-02-18 16:46:02 时间
本文简介
使用 fabric.js
在某些情况下你可能需要固定元素边框的宽度,仔细看文档你会发现 fabric.js
已经为我们提供了这个功能。本文简单介绍一下这个功能。
实现方法
先揭晓答案,将元素的 strokeUniform
属性设置为 true
后,元素在缩放后,边框会恢复成最初设置的大小。
<canvas id="canvas" width="500" height="400" style="border: 1px solid #ccc;"></canvas>
<script>
let rect = new fabric.Rect({
left: 260,
top: 110,
width: 80,
height: 60,
fill: 'hotpink',
stroke: '#333',
strokeWidth: 10,
strokeUniform: true // 限制边框宽度缩放
})
// 省略部分元素
canvas.add(rect)
</script>
在本例中,我将几何元素的边框宽度设置成10,在用鼠标拖放几何元素后,元素的边框宽度也会恢复成10。
strokeUniform
的默认值是 false
,如果不将 strokeUniform
设置为 true
,边框就会随着几何元素的缩放而缩放。
fill
、stroke
、strokeWidth
等属性如果忘了的话可以查看 《Fabric.js从入门到 _ _ _ _ _ _》 复习一下。
遗憾的是
遗憾的是,将 strokeUniform
设置为 true
后对文本元素并不生效。
<canvas id="canvas" width="500" height="400" style="border: 1px solid #ccc;"></canvas>
<script>
let text = new fabric.Text('雷猴啊', {
top: 30,
left: 30,
fill: 'orange',
stroke: '#333',
strokeWidth: 2,
strokeUniform: true // 在 Text 里不生效!!!
})
// 省略部分元素
canvas.add(text)
</script>
代码仓库
相关文章
- 如何用 JavaScript 编写你的第一个单元测试
- 如何在JavaScript中使用for循环
- JavaScript中的箭头函数
- 有用的内置Node.js APIs
- 你不知道的JavaScript APIs
- 如何在JavaScript中使用高阶函数
- React报错之Property does not exist on type 'JSX.IntrinsicElements'
- 检查原生 JavaScript 函数是否被覆盖
- React报错之Type '() => JSX.Element[]' is not assignable to type FunctionComponent
- React报错之JSX element type does not have any construct or call signatures
- React报错之组件不能作为JSX组件使用
- 理解JavaScript中的window对象
- 让Node项目支持可扩展的环境配置
- 使用 DevTools 加速调试 Node.js 应用程序
- 讲述JSON Web Token(概念)
- ?RxJs合并接口应用案例
- 如何让Node服务实现自动重启
- 使用PlopJs让开发变得更高效
- 上手JavaScript基准测试
- 【NodeJs】启动本地服务遭遇端口占用怎么办⁉️