Canvas

4 min read

获取方式

const Canvas = F2.G.Canvas;

创建 Canvas 实例

new Canvas(config) 创建 canvas 对象。

// <canvas id="c1"></canvas>

new Canvas({
  el: 'c1',
  width: 500,
  height: 500
});

参数：config

类型：Object，创建 canvas 对象需要的传递的属性，具体包含：

属性名	类型	描述
`el`	String/HtmlElement	对应 canvas dom 的 id 或者 canvas dom 对象。
`context`	CanvasRenderingContext2D	canvas 上下文，即通过传入 canvas 上下文对象来创建 Canvas 对象。
`width`	Number	canvas 的宽度，可选，如果不设置则默认按照传入 canvas 元素的实际宽度。
`height`	Number	canvas 的高度，可选，如果不设置则默认按照传入 canvas 元素的实际高度。
`pixelRatio`	Number	canvas 的显示精度，默认读取当前设备的像素比。

方法

getChildren()

/**
 * 获取 canvas 容器下包含的元素集合
 * @return {Array} 返回容器内包含的元素集合
 */
getChildren()

isDestroyed()

/**
 * 标识对象是否已被销毁
 * @return {Boolean}
 */
isDestroyed()

getWidth()

/**
 * 获取 canvas 对应 dom 元素的宽度
 * @return {Number} 返回宽度
 */
getWidth()

getHeight()

/**
 * 获取 canvas 对应 dom 元素的高度
 * @return {Number} 返回高度
 */
getHeight()

changeSize(width, height)

/**
 * 改变 canvas 的宽高
 * @param  {Number} width  宽度
 * @param  {Number} height 高度
 */
changeSize(width, height)

getPointByClient(clientX, clientY)

/**
 * 将窗口坐标转变成画布坐标
 * @param  {Number} clientX 窗口 x 坐标
 * @param  {Number} clientY 窗口 y 坐标
 * @return {Object} canvas 画布坐标坐标
 */
getPointByClient(clientX, clientY)

addShape(type, config)

/**
 * 创建并往 canvas 上添加 Shape
 * @param {String} type 添加的 shape 类型
 * @param {Object} config  shape 的配置项
 * @return {Shape} 返回创建的 shape 实例
 */
addShape(type, config = {})

参数 config 传入的是 Shape 的配置项，包含：

{
  className: String, // 标记，由用户指定
  zIndex: Number, // shape 的层次索引
  visible: Boolean, // 显示隐藏
  attrs: Object // shape 的图形属性配置，见 Shape 描述，不同 shape 的图形属性不同
}

addGroup(config)

/**
 * 创建并添加 Group 组
 * @param {Object||null} cfg 配置信息
 * @return {Group} 返回创建的 Group 实例
 */
addGroup(config)

参数 config 传入的是 Group 的配置项，包含：

{
  className: String, // 标记，由用户指定
  zIndex: Number, // group 的层次索引
  visible: Boolean // 显示隐藏
}

add(items)

/**
 * 往 canvas 中添加元素
 * @param {Array||Group||Shape} items 可以是 group 实例或者 shape 实例或者他们的数组集合
 * @return {Canvas}  返回当前 canvas 对象
 */
add(items)

contain(item)

/**
 * 判断 canvas 中是否包含 item 元素
 * @param  {Shape||Group} item shape 或者 group 实例
 * @return {Boolean}      返回判断结果，true 表示包含，false 表示不包含
 */
contain(item)

sort()

/**
 * 按照当前容器中包含元素的 zIndex 进行从大到小的排序
 * @return {Canvas||Group} 返回自己
 */
sort()

get(name)

获取 canvas 的属性，name 对应属性名。

set(name, value)

设置属性值。

clear()

/**
  * 清除所有的元素
  * @return {Canvas|Group} 返回自己
  */
clear()

draw()

绘制。

destroy()

销毁 canvas 对象。