关于前端:Fabricjs-设置容器类名要注意这几点

本文简介

点赞 + 关注 + 珍藏 = 学会了

用 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 自定义子类，创立属于本人的图形》

点赞 + 关注 + 珍藏 = 学会了
代码仓库