本文简介
点赞 + 关注 + 珍藏 = 学会了
用 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 自定义子类，创立属于本人的图形》
点赞 + 关注 + 珍藏 = 学会了
代码仓库