仓库源文，站点原文

layout: post title: KineticJS教程2：图形对象与图形样式 categories:

• 科 tags:
• 编程
• js

2015-06-11 08:27:22

3. 图形对象

3.1. Shape

Kinetic提供了一个Shape对象用于在层上绘制图形, 我们可以通过Kinetic.Shape()构造方法返回一个Shape对象:

var shape = new Kinetic.Shape(config);

Shape方法的config参数是关于具体的绘图参数的数组对象, Kinetic就是根据这个参数里的具体信息进行绘图的.

config的完整参数如下表所示:

其中最重要的参数就是drawFunc, 这是一个由用户创建的方法对象, Kinetic绘图时就是调用的这个方法.

比如我们可以利用如下代码在页面上画一个矩形:

运行结构如下:

<div id="ctn_31" style="border:solid 2px #CCC;"></div>

3.2. 常用图形

Kinetic除了有Shape可以用于绘图外, 还为我们提供了一系列用于常见图形绘制的对象, 包括矩形(Rect), 圆(Circle), 图像(Image), 精灵(Sprite), 文本(Text), 线(Line), 多边形(Polygon), 常用多边形(Regular Polygon), 路径(Path), 星星(Star)几种.

这几个图形对象都是继承自Shape, 所以使用方法与Shape类似, 以一个config对象指定绘图细节, 与Shape不同的是, 不需要我们指定drawFunc, 只需要根据图形的类型指定关键参数就可以了.

在此, 我们以Shape.Rect为例, 绘制矩形图形的代码如下:

运行结果如下:

<div id="ctn_33" style="border:solid 2px #CCC;"></div>

由于Group继承自Node, 而Shape也是继承自Node, 因此, Group的一些属性和行为也和Shape比较类似, 比如Group的构造方法也可以像接受一个config参数配置Group的位置, 旋转, 缩放等属性. 如:

或者也可以不在创建group时通过config参数设定, 而是创建group对象后通过相对应的方法设定各属性, 比如x和y参数就可以分别用group.setX(220)和group.setY(20)来设定.

4. 图形样式

4.1. 填充

Kinetic中图形的填充属性可以利用构造方法中config参数的fill属性进行设定, 也可以用图形对象的setFill方法进行设定. 不过要注意, setFill使用的填充类型必须与创建这个对象时config中所用的填充类型相同.

Kinetic支持颜色, 图像, 线性渐变和径向渐变四种填充模式.

4.1.1 颜色填充

运行结果如下:

<div id="ctn_411" style="border:solid 2px #CCC;"></div>

4.1.2 线性渐变填充

线性渐变填充的设置形式如下:

    fillLinearGradientStartPoint: { x: 0, y: 50 },
    fillLinearGradientEndPoint: { x: 400, y: 50 },
    fillLinearGradientColorStops: [ 0, "red", 0.5, "green", 1, "blue" ]

其中fillLinearGradientStartPoint是线性渐变线的起点位置, fillLinearGradientEndPoint是线性渐变线的终点位置, fillLinearGradientColorStops是指定线性渐变线上关键点的颜色值, 位置参数是一个介于0到1之间的浮点数, 0表示起点的颜色, 1表示终点的颜色.

这里要注意的是, 渐变线的坐标基点并不是以canvas左上角为(0, 0)点. 如果是图形对象是矩形的话, 矩形的左上角点才是(0, 0)点, 如果是圆形对象的话, 圆心才是(0, 0)点.

修改填充属性时, 可使用

    obj.setAttrs({
        FillLinearGradientStartPoint:{ x: 100, y: 50 },
        FillLinearGradientEndPoint: { x: 400, y: 50 },
        FillLinearGradientColorStops: [ 0, "yellow", 0.5, "cyan", 1, "purple" ]
    })

或

    obj.setFillLinearGradientStartPoint({ x: 100, y: 50 })
    obj.setFillLinearGradientEndPoint({ x: 400, y: 50 })
    obj.setFillLinearGradientColorStops([ 0, "yellow", 0.5, "cyan", 1, "purple" ])

示例代码如下:

运行结果如下:

<div id="ctn_412" style="border:solid 2px #CCC;"></div>

上述代码的渐变效果图如下:

上面的矩形渐变线为(0, 50)到(400, 50), 正如上面提到的, 这里的渐变线是以这个矩形的左上角为(0, 0)点的, 所以实际的渐变线是如黑线条所示的区域, 而下面的矩形由于setAttrs的修改, 渐变线为(100, 50)到(400, 50), 所以实际渐变线是图上所示的黑线区域, 而不是整个矩形的范围. 不要把渐变线的坐标理解为相对于canvas的左上角.

4.1.3.径向渐变填充

径向渐变填充的设置形式如下:

    fillRadialGradientStartPoint: { x: 0, y: 0 },
    fillRadialGradientStartRadius: 0,
    fillRadialGradientEndPoint: { x: 0, y: 0 },
    fillRadialGradientEndRadius: 100,
    fillRadialGradientColorStops: [ 0, "red", 0.5, "green", 1, "blue" ]

其中fillRadialGradientStartPoint是径向渐变的起始圆位置, fillRadialGradientStartRadius是径向渐变的终止圆位置, fillRadialGradientColorStops是指定径向渐变圆间的关键距离的颜色值, 位置参数是一个介于0到1之间的浮点数, 0表示起始圆的颜色, 1表示终止圆的颜色.

这里要注意的是, 与线性渐变类似, 渐变圆的圆心坐标基点并不是以canvas左上角为(0, 0)点, 如果是图形对象是矩形的话, 矩形的左上角点才是(0, 0)点, 如果是圆形对象的话, 圆心才是(0, 0)点.

上述代码的运行结果如下:

<div id="ctn_413" style="border:solid 2px #CCC;"></div>

4.1.4. 图像填充

图像填充设置方式如下:

    fillPatternImage: image,
    fillPatternOffset: { x:0, y:0 }

其中, fillPatternImage是javascript的Image对象, fillPatternOffset是图像开始填充的位置偏移量.

示例代码:

上述代码运行结果如下:

<div id="ctn_414" style="border:solid 2px #CCC;"></div>

4.2. 线条颜色与宽度

线条对象与其他图形的边缘线的颜色与宽度设置如下:

4.3. 透明

透明度是一个0到1之间的浮点值, 0表示完全透明, 1则是完全不透明.

4.4. 阴影

4.5. 线段间连接点样式

连接点的样式可以是miter, bevel或round, 默认的样式是miter.

4.6. 图形的隐藏与显示