共计 1807 个字符,预计需要花费 5 分钟才能阅读完成。
本文简介
点赞 + 关注 + 珍藏 = 学会了
用 fabric.js
创立画布时,fabric.js
会在 canvas
元素外包一层 div
容器。
如果想不便设置容器款式或者想通过 js
管制该容器,能够先给容器一个类名。
本文次要讲 如何给包装容器设置类名 和相干注意事项。
设置容器类名
在应用 fabric.js
创立画布时就能够 通过 containerClass
设置包装容器的类名。
<canvas id="canvasBox"></canvas>
<script>
// 创立画布
let canvas = new fabric.Canvas('c', {containerClass: 'ccc'})
</script>
我这里轻易命名,应用了 ccc
。
此时关上控制台就能够看到外层包装容器的类名是 ccc
。
能够再配合 css
设置一些款式。
<style>
.ccc {border: 1px solid pink;}
</style>
<canvas id="canvasBox"></canvas>
<script>
// 创立画布
let canvas = new fabric.Canvas('c', {containerClass: 'ccc'})
</script>
应用 fabric.js
的话,倡议应用该办法设置包装容器的类名。
注意事项
尽管设置包装容器类名很不便,但也存在一些注意事项。
容器有默认类名
如果没应用 containerClass
设置包装容器类名,fabric.js
会将容器的类名设置为 canvas-container
。
不倡议用 css 设置宽高
如果用 css
设置容器的宽高,还须要应用 !important
才会失效。因为 fabric.js
会将默认宽高绑定在元素的 style
上,变成内联款式。
但即便是应用 !important
进步款式权重,只会扭转容器宽高,并不会扭转画布宽高。所以还须要设置画布宽高。
<style>
.ccc {
border: 1px solid pink;
width: 500px !important;
height: 300px !important;
}
.ccc canvas {
width: 500px !important;
height: 300px !important;
}
</style>
<canvas id="canvasBox"></canvas>
<script>
let canvas = new fabric.Canvas('canvasBox', {containerClass: 'ccc'})
</script>
在 canvas
中不举荐应用 css
的形式设置画布宽高,因为这样做会导致画布内容变形。
比方我在画布中增加一个正方形,这么一操作就不是正方形了。
<style>
.ccc {
border: 1px solid pink;
width: 500px !important;
height: 300px !important;
}
.ccc canvas {
width: 500px !important;
height: 300px !important;
}
</style>
<canvas id="canvasBox"></canvas>
<script>
let canvas = new fabric.Canvas('canvasBox', {containerClass: 'ccc'})
let rect = new fabric.Rect({
width: 100,
height: 100,
top: 10,
left: 10
})
canvas.add(rect)
</script>
如需设置画布宽高,可参考《Fabric.js 3 个 api 设置画布宽高》
不倡议设置容器定位模式
fabric.js
在初始化画布时,会将容器的 position
设置成 relative
;
将外面的 2 个 canvas
元素的 position
设置成 absolute
。
没非凡需要的话,应该尊重 fabric.js
的这个设定。
不倡议设置容器的 padding
如果只是设置了容器的 padding
其实没多大意义。
因为外部的两个 canvas
元素都应用了相对定位 (relative
) 的定位模式,所以这样操作没啥意义。
代码仓库
⭐Fabric.js 设置容器类名
举荐浏览
👍《Fabric.js 从入门到_ _ _ _》
👍《Fabric.js 元素核心缩放》
👍《Fabric.js 变换视窗》
👍《Fabric.js 拖拽平移画布》
👍《Fabric.js 元素被遮挡的局部也能够操作》
👍《Fabric.js 自定义子类,创立属于本人的图形》
点赞 + 关注 + 珍藏 = 学会了
代码仓库