Skip to content

2.x相比1.x的变化

errorrik edited this page Mar 20, 2014 · 1 revision

总结

主要变化有两个:

  1. module拆分更细,更利于按需引用
  2. shapeloadingEffect才用类化风格进行了重新设计

shape

创建

在1.x中,ZRenderStorage实例的addShape方法,接收的是一个Object类型的shapeOption,通过shapeOption.shape标识形状的类型。zrender在加载时默认预置了几乎所有的形状。

zr.addShape({
    shape : 'image',
    scale : [1, 1],
    zlevel : 1,
    style : {
        x : 0,
        y : 0,
        image : imageShape.style.image
    },
    draggable : false,
    hoverable : false,
});

在2.x中,对Shape进行了按模块拆分,zrender在加载时不再预置。ZRenderStorage实例的addShape方法,接收的是Shape实例,所以,使用者需要自己创建相应的Shape实例,再传递给addShape方法。创建Shape实例的option中不需要包含描述类型信息的option.shape属性。

var ImageShape = require('zrender/shape/Image');
var imageShape = new ImageShape({
    scale : [1, 1],
    zlevel : 1,
    style : {
        x : 0,
        y : 0,
        image : imageShape.style.image
    },
    draggable : false,
    hoverable : false
});
zr.addShape(imageShape);

适应类化的方法参数调整

Shape类化后,相应的方法做了删除shape实例传入,通过this引用来代替的调整。相关调整的类方法有:brushupdateTransformdriftisCover等。

onbrush 和 ondrift

这两个事件,把arguments中的shape去掉了,可以通过this获得当前shape。

needTransform

__needTransform属性变更为needTransform

loadingEffect

在1.x中,tool/loadingEffect作为独立存在的模块,提供所有加载效果的实现。ZRenderPainter实例的showLoading方法接收的是一个Object类型的loadingOption,通过loadingOption.effect标识加载效果的类型。

zr.showLoading({
    effect : 'bar',
    // ...
});

在2.x中,对tool/loadingEffect进行了按模块拆分和类化。ZRenderPainter实例的showLoading方法,接收的是Effect实例。所以,使用者需要自己创建相应的Effect实例,再传递给showLoading方法。创建Shape实例的option中不需要包含描述标识加载效果的类型的属性。

var BarEffect = require('zrender/loadingEffect/Bar');
var barEffect = new BarEffect({
    // ...
});

// 做法1: 每次都传入effect对象
zr.showLoading(barEffect);

// 做法2: 一次传入effect对象,每次无餐调用showLoading
zr.painter.setLoadingEffect(barEffect);
zr.showLoading();

showLoading方法的签名为showLoading({Object=}loadingEffect),loadingEffect是可选参数。Painter增加了setLoadingEffect方法。使用者可以事先调用Painter实例的setLoadingEffect,然后每次只需要直接showLoading()就行。ZRender实例不包含setLoadingEffect方法,使用者可以通过myZrender.painter.setLoadingEffect来调用。

在1.x的loadingOption中,effect代表的是效果类型,effectOption代表的是效果参数。

在1.x的loadingOption中,由于不用传递效果类型,所以将代表效果参数的effectOption更改成effect

其他细节

newShapeId

将唯一id生成进行了统一,删除了zrenderStorage上的newShapeId方法。使用者如果要生成唯一id,可以通过如下途径:

var guid = require('zrender/tool/guid');
guid();

computeBoundingBox

原位于'tool/util'中computeBoundingBox相关的方法,移动到'tool/computeBoundingBox'中。该模块是一个function,下面带有几个静态方法,用于特殊场景的BoundingBox计算:

  • arc
  • cubeBezier
  • quadraticBezier
var computeBoundingBox = require('zrender/tool/computeBoundingBox');
computeBoundingBox(/*....*/);
computeBoundingBox.arc(/*....*/);
computeBoundingBox.cubeBezier(/*....*/);
computeBoundingBox.quadraticBezier(/*....*/);

zrender主模块

  1. StoragePainterHandler抽离出来,成为独立模块
  2. ZRender类进行了prototype化

配置项位置变更

如下配置项从zrender主模块移动到了config模块中。

  • catchBrushException
  • debugMode
var config = require('zrender/config');
computeBoundingBox(/*....*/);
config.debugMode = 1;

log

原先log功能以方法的形式在zrender主模块以zrender.log的方式提供,现迁移到tool/log