# canvas-libs-doc

**Repository Path**: jackdizhu/canvas-libs-doc

## Basic Information

- **Project Name**: canvas-libs-doc
- **Description**: Fabric.js 文档
ZRender 文档
- **Primary Language**: NodeJS
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-10-31
- **Last Updated**: 2021-11-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# canvas-libs-doc

#### 介绍
Fabric.js 文档
ZRender 文档

#### Fabric.js

> [官方文档](http://fabricjs.com/docs/)
> [gitee翻译文档](https://gitee.com/eternitywith/fabric.js-docs-cn)

#### ZRender

> [官方文档](https://ecomfe.github.io/zrender-doc/public/api.html)
> [api文档](https://www.wenjiangs.com/doc/nokkytjx)

#### Element元素属性

> zrender
* zrender.Displayable 是一个抽象类, 用于表明其子类（如 Rect 等）构造函数参数的共同部分, 元素初始化之后，需要通过 zrender.Element.attr 修改属性
<table>
  <thead>
    <tr>
      <th>名称</th>
      <th>类型</th>
      <th>默认值</th>
      <th>描述</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>opts.culling</td>
      <td>`boolean`</td>
      <td>`false`</td>
      <td>是否进行裁剪。</td>
    </tr>
    <tr>
      <td>opts.cursor</td>
      <td>`string`</td>
      <td>`'pointer'`</td>
      <td>鼠标移到元素上时的鼠标样式。</td>
    </tr>
    <tr>
      <td>opts.draggable</td>
      <td>`boolean`</td>
      <td>`false`</td>
      <td>图形是否可拖曳。</td>
    </tr>
    <tr>
      <td>opts.invisible</td>
      <td>`boolean`</td>
      <td>`false`</td>
      <td>图形是否不可见，为 `true` 时不绘制图形，但是仍能触发鼠标事件。</td>
    </tr>
    <tr>
      <td>opts.progressive</td>
      <td>`number`</td>
      <td>`-1`</td>
      <td>是否渐进式渲染。当图形元素过多时才使用，用大于 0 的数字表示渲染顺序。</td>
    </tr>
    <tr>
      <td>opts.rectHover</td>
      <td>`boolean`</td>
      <td>`false`</td>
      <td>是否使用包围盒检验鼠标是否移动到物体。`false` 则检测元素实际的内容。</td>
    </tr>
    <tr>
      <td>opts.silent</td>
      <td>`boolean`</td>
      <td>`false`</td>
      <td>是否响应鼠标事件。</td>
    </tr>
    <tr>
      <td>opts.style.fill</td>
      <td>`string`</td>
      <td>`'#000'`</td>
      <td>填充样式。</td>
    </tr>
    <tr>
      <td>opts.style.stroke</td>
      <td>`string`</td>
      <td>`null`</td>
      <td>描边样式。</td>
    </tr>
    <tr>
      <td>opts.style.opacity</td>
      <td>`number`</td>
      <td>`1`</td>
      <td>不透明度。</td>
    </tr>
    <tr>
      <td>opts.style.lineDash</td>
      <td>`number[]`</td>
      <td>`null`</td>
      <td>描边虚线样式，参考 [SVG
        stroke-dasharray](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray)。</td>
    </tr>
    <tr>
      <td>opts.style.lineDashOffset</td>
      <td>`number`</td>
      <td>`null`</td>
      <td>描边虚线偏移，参考 [SVG
        stroke-dashoffset](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset)。</td>
    </tr>
    <tr>
      <td>opts.style.shadowBlur</td>
      <td>`number`</td>
      <td>`0`</td>
      <td>阴影模糊大小。</td>
    </tr>
    <tr>
      <td>opts.style.shadowColor</td>
      <td>`string`</td>
      <td>`'transparent'`</td>
      <td>阴影颜色。</td>
    </tr>
    <tr>
      <td>opts.style.shadowOffsetX</td>
      <td>`number`</td>
      <td>`0`</td>
      <td>阴影横向偏移。</td>
    </tr>
    <tr>
      <td>opts.style.shadowOffsetY</td>
      <td>`number`</td>
      <td>`0`</td>
      <td>阴影纵向偏移。</td>
    </tr>
    <tr>
      <td>opts.style.lineWidth</td>
      <td>`number`</td>
      <td>`0`</td>
      <td>线宽。</td>
    </tr>
    <tr>
      <td>opts.style.strokeNoScale</td>
      <td>`boolean`</td>
      <td>`false`</td>
      <td>描边粗细不随缩放而改变，`false` 则会根据缩放同比例缩放描边粗细。</td>
    </tr>
    <tr>
      <td>opts.style.text</td>
      <td>`string`</td>
      <td>`null`</td>
      <td>在图形中显示的文字。</td>
    </tr>
    <tr>
      <td>opts.style.font</td>
      <td>`string`</td>
      <td>`null`</td>
      <td>文字样式，由 `fontSize`、 `fontFamily`、 `fontStyle`、 `fontWeight` 组成，建议分别设置这几项而非直接设置 `font`。</td>
    </tr>
    <tr>
      <td>opts.style.fontStyle</td>
      <td>`string`</td>
      <td>`null`</td>
      <td>同 [CSS font-style](https://developer.mozilla.org/en-US/docs/Web/CSS/font-style)。</td>
    </tr>
    <tr>
      <td>opts.style.fontWeight</td>
      <td>`string`</td>
      <td>`null`</td>
      <td>同 [CSS font-weight](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight)。</td>
    </tr>
    <tr>
      <td>opts.style.fontSize</td>
      <td>`string`</td>
      <td>`null`</td>
      <td>同 [CSS font-size](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size)。</td>
    </tr>
    <tr>
      <td>opts.style.fontFamily</td>
      <td>`string`</td>
      <td>`null`</td>
      <td>同 [CSS font-family](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family)。</td>
    </tr>
    <tr>
      <td>opts.style.textFill</td>
      <td>`string`</td>
      <td>`null`</td>
      <td>文字填充样式。</td>
    </tr>
    <tr>
      <td>opts.style.textStroke</td>
      <td>`string`</td>
      <td>`null`</td>
      <td>文字描边样式。</td>
    </tr>
    <tr>
      <td>opts.style.textWidth</td>
      <td>`number`</td>
      <td>`null`</td>
      <td>文字宽度。</td>
    </tr>
    <tr>
      <td>opts.style.textHeight</td>
      <td>`number`</td>
      <td>`null`</td>
      <td>文字高度，仅用于设置背景色时需要设置。</td>
    </tr>
    <tr>
      <td>opts.style.textLineWidth</td>
      <td>`number`</td>
      <td>`0`</td>
      <td>文字描边宽度。</td>
    </tr>
    <tr>
      <td>opts.style.textLineHeight</td>
      <td>`number`</td>
      <td>`0`</td>
      <td>文字行高。</td>
    </tr>
    <tr>
      <td>opts.style.textPosition</td>
      <td>`string|number[]`</td>
      <td>`'inside'`</td>
      <td>文字位置，可以为 `'inside'`、 `'left'`、 `'right'`、 `'top'`、 `'bottom'`，或一个二维数组 `[x, y]` 表示相对形状的位置。</td>
    </tr>
    <tr>
      <td>opts.style.textRect</td>
      <td>`Object`</td>
      <td>`null`</td>
      <td>文字包围盒，包括 `x`、 `y`、 `width`、 `height` 属性，如果没有设置，将使用形状的包围盒。</td>
    </tr>
    <tr>
      <td>opts.style.textOffset</td>
      <td>`number[]`</td>
      <td>`null`</td>
      <td>文字位置偏移，包括 `x`、 `y`。</td>
    </tr>
    <tr>
      <td>opts.style.textAlign</td>
      <td>`string`</td>
      <td>`null`</td>
      <td>文字水平对齐方式，可取值：`'left'`、 `'center'`、 `'right'`，默认根据 `textPosition` 计算。</td>
    </tr>
    <tr>
      <td>opts.style.textVerticalAlign</td>
      <td>`string`</td>
      <td>`null`</td>
      <td>文字垂直对齐方式，可取值：`'top'`、 `'middle'`、 `'bottom'`，默认根据 `textPosition` 计算。</td>
    </tr>
    <tr>
      <td>opts.style.textDistance</td>
      <td>`number`</td>
      <td>`5`</td>
      <td>文字与其对齐的边缘的距离，如 `textPosition` 为 `top` 时，`textDistance` 表示与形状上方的距离。</td>
    </tr>
    <tr>
      <td>opts.style.textShadowColor</td>
      <td>`string`</td>
      <td>`'transparent'`</td>
      <td>文字阴影颜色。</td>
    </tr>
    <tr>
      <td>opts.style.textShadowBlur</td>
      <td>`number`</td>
      <td>`0`</td>
      <td>文字阴影模糊大小。</td>
    </tr>
    <tr>
      <td>opts.style.textShadowOffsetX</td>
      <td>`number`</td>
      <td>`0`</td>
      <td>文字阴影水平偏移。</td>
    </tr>
    <tr>
      <td>opts.style.textShadowOffsetY</td>
      <td>`number`</td>
      <td>`0`</td>
      <td>文字阴影垂直偏移。</td>
    </tr>
    <tr>
      <td>opts.style.textBoxShadowColor</td>
      <td>`string`</td>
      <td>`'transparent'`</td>
      <td>文字包围盒阴影颜色。</td>
    </tr>
    <tr>
      <td>opts.style.textBoxShadowBlur</td>
      <td>`number`</td>
      <td>`0`</td>
      <td>文字包围盒阴影模糊大小。</td>
    </tr>
    <tr>
      <td>opts.style.textBoxShadowOffsetX</td>
      <td>`number`</td>
      <td>`0`</td>
      <td>文字包围盒阴影水平偏移。</td>
    </tr>
    <tr>
      <td>opts.style.textBoxShadowOffsetY</td>
      <td>`number`</td>
      <td>`0`</td>
      <td>文字包围盒阴影垂直偏移。</td>
    </tr>
    <tr>
      <td>opts.style.transformText</td>
      <td>`boolean`</td>
      <td>`false`</td>
      <td>文字是否跟随变换效果，仅对 `Path` 或 `Image` 元素有效</td>
    </tr>
    <tr>
      <td>opts.style.textRotation</td>
      <td>`number`</td>
      <td>`0`</td>
      <td>文字旋转角度，仅对 `Path` 或 `Image` 元素有效，并且 `transformText` 应设置为 `false`。</td>
    </tr>
    <tr>
      <td>opts.style.textOrigin</td>
      <td>`string|number[]`</td>
      <td>`null`</td>
      <td>文字变换中心，可以是 `'center'` 或一个二维数组 `[x, y]` 表示相对形状的位置，默认值是 `textPosition`。</td>
    </tr>
    <tr>
      <td>opts.style.textBackgroundColor</td>
      <td>`string`</td>
      <td>`null`</td>
      <td>文字包围盒颜色。</td>
    </tr>
    <tr>
      <td>opts.style.textBorderColor</td>
      <td>`string`</td>
      <td>`null`</td>
      <td>文字包围盒描边颜色。</td>
    </tr>
    <tr>
      <td>opts.style.textBorderWidth</td>
      <td>`number`</td>
      <td>`0`</td>
      <td>文字包围盒描边宽度。</td>
    </tr>
    <tr>
      <td>opts.style.textBorderRadius</td>
      <td>`number`</td>
      <td>`0`</td>
      <td>文字圆角大小。</td>
    </tr>
    <tr>
      <td>opts.style.textPadding</td>
      <td>`number|number[]`</td>
      <td>`null`</td>
      <td>文字内边距，可以是 `2` 或 `[2, 4]` 或 `[2, 3, 4, 5]` 的形式，同 [CSS
        Padding](https://developer.mozilla.org/en-US/docs/Web/CSS/padding)，单位是像素。</td>
    </tr>
    <tr>
      <td>opts.style.rich</td>
      <td>`Object`</td>
      <td>`null`</td>
      <td>富文本样式，参考 [ECharts rich
        配置项](http://echarts.baidu.com/tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE)。</td>
    </tr>
    <tr>
      <td>opts.style.truncate</td>
      <td>`Object`</td>
      <td>`null`</td>
      <td>当文字过长显示不下时，显示省略号表示。</td>
    </tr>
    <tr>
      <td>opts.style.truncate.outerWidth</td>
      <td>`number`</td>
      <td>`null`</td>
      <td>包含了 `textPadding` 的宽度，超出这个范围就裁剪。</td>
    </tr>
    <tr>
      <td>opts.style.truncate.outerHeight</td>
      <td>`number`</td>
      <td>`null`</td>
      <td>包含了 `textPadding` 的高度，超出这个范围就裁剪。</td>
    </tr>
    <tr>
      <td>opts.style.truncate.ellipsis</td>
      <td>`string`</td>
      <td>`'...'`</td>
      <td>默认用省略号表示超出部分，也可以对其进行自定义。</td>
    </tr>
    <tr>
      <td>opts.style.truncate.placeholder</td>
      <td>`string`</td>
      <td>`null`</td>
      <td>如果空间过小，导致省略号也显示不下，但是又不想空着，可能得有个什么标记表示这里是有字符的，就用个 “点”，就是在这个 placeholder 里设置。</td>
    </tr>
    <tr>
      <td>opts.style.blend</td>
      <td>`string`</td>
      <td>`null`</td>
      <td>混合模式，同 [Canvas
        globalCompositeOperation](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation)。
      </td>
    </tr>
    <tr>
      <td>opts.zlevel</td>
      <td>`number`</td>
      <td>`0`</td>
      <td>决定绘画在哪层 Canvas 中。Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的 `zlevel`。需要注意的是过多的 Canvas
        会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。`zlevel` 大的 Canvas 会放在 `zlevel` 小的 Canvas 的上面。</td>
    </tr>
    <tr>
      <td>opts.z</td>
      <td>`number`</td>
      <td>`0`</td>
      <td>控制图形的前后顺序。`z` 值小的图形会被 `z` 值大的图形覆盖。`z` 相比 `zlevel` 优先级更低，而且不会创建新的 Canvas。</td>
    </tr>
    <tr>
      <td>opts.z2</td>
      <td>`number`</td>
      <td>`0`</td>
      <td>与 `z` 类似，优先级比 `z` 更低。</td>
    </tr>
  </tbody>
</table>

#### 事件

> demo-event-listener.vue

```js
/**
 * 事件初始化,添加全局事件代理
 */
fabricEventInit () {
  // 事件处理
  this.fabricEvent.forEach(eventName => {
    this.fabricjsCanvas.on(eventName, function(Event) {
      if (!Event.target) {
        return false;
      }
      let callBack = Event.target['on-' + eventName]
      callBack && callBack(Event)
    });
  })
},
/**
 * 绑定,添加事件
 */
fabricAddEventListener (node, events = ['selected', 'mouse:down', 'mouse:move', 'mouse:up'], callBack) {
  // 事件由fabricEventInit统一处理
  events.forEach(eventName => {
    node['on-' + eventName] = function (Event) {
      callBack(Event)
    }
  })
},
/**
 * 事件初始化,添加全局事件代理
 */
zrenderAddEventInit () {
  this.zrenderEvent.forEach(eventName => {
    this.zR.on(eventName, function (Event) {
      if (!Event.target) {
        return false;
      }
      let callBack = Event.target['on-' + eventName]
      callBack && callBack(Event)
    })
  });
},
/**
 * 绑定,添加事件
 */
zrenderAddEventListener (node, events = ['click', 'dblclick', 'mousedown', 'mousemove', 'mouseup', 'mousewheel', 'contextmenu'], callBack, type = 'event') {
  // 元素绑定事件处理方法
  type === 'event' && events.forEach(eventName => {
    node.on(eventName, function (Event) {
      callBack && callBack(Event)
    })
  });

  // 事件由zrenderAddEventInit统一处理
  type === 'attr' && events.forEach(eventName => {
    node['on-' + eventName] = function (Event) {
      callBack(Event)
    }
  })
},
```

#### 分层绘制

> demo-zindex.vue

* fabric 元素添加后可添加事件(bringToFront, sendToBack)调整元素层级
* zrender 元素定义是配置(z, zlevel)属性, 绘制前分层级绘制; zlevel: 使用不同canvas绘制

```js
// 交互元素置顶, 固定元素置底
fabricjsCanvas.bringToFront(rect);
fabricjsCanvas.sendToBack(line);
fabricjsCanvas.sendBackwards(line); // 下移
fabricjsCanvas.bringForward(line); // 上移
fabricjsCanvas.bringToFront(line); // 置顶
fabricjsCanvas.sendToBack(line); // 置底

let line = new zrender.Line({
  shape: {
    x1: 80,
    y1: 180,
    x2: 260,
    y2: 180,
  },
  style: {
    fill: "#666",
    stroke: "#666"
  },
  zlevel: -1,
  z: 1
});
```

#### 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request


#### 特技

1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)