KineticJS教程2：图形对象与图形样式

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绘图时就是调用的这个方法.

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

# Language: js
<script>
	window.onload = function() {

		//创建舞台
		var stage = new Kinetic.Stage({
			container: "container",
			width: 600,
			height: 400
		});

		var layer = new Kinetic.Layer();

		//创建config参数
		var config = {
			//绘图方法, 画一个矩形
			drawFunc: function(context) {
				context.rect(200, 150, 200, 100);
				context.fillStrokeShape(this);
			},
			//填充色
			fill: "green",
			//边缘线颜色
			stroke: "black",
			//边缘线宽度
			strokeWidth: 4
		};

		//创建Shape对象
		var rectShape = new Kinetic.Shape(config);

		//把Shape对象添加到层里
		layer.add(rectShape);

		//将层添加到舞台中
		stage.add(layer);
	};
</script>

运行结构如下:

3.2. 常用图形

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

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

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

# Language: js
<script>
	window.onload = function() {
		var stage = new Kinetic.Stage({
			container: "container",
			width: 600,
			height: 400
		});
		var layer = new Kinetic.Layer();

		//创建config参数
		var config = {
			x: 200,           //左上角x坐标
			y: 150,           //左上角y坐标
			width: 200,       //矩形宽度
			height: 100,      //矩形高度
			fill: "blue",     //填充色
			stroke: "black",  //边缘线颜色
			strokeWidth: 4    //边缘线宽度
		};

		//创建Shape对象
		var rect = new Kinetic.Rect(config);

		//把Shape对象添加到层里
		layer.add(rect);

		//将层添加到舞台中
		stage.add(layer);
	};
</script>

运行结果如下:

具体每种图形的config参数细节可以参见Kinetic的文档.

3.3. 图形组

Kinetic提供了Group对象, 用于把若干个不同的图形对象, 或者是其他的Group对象组合成一个复杂的图形进行统一管理.

比如, 我们创建一个包含一个矩形和一个圆的group, 并添加到层中显示出来.

# Language: js
<script>
	window.onload = function() {
		var stage = new Kinetic.Stage({
			container: "container",
			width: 600,
			height: 400
		});

		var layer = new Kinetic.Layer();

		//创建一个要加进组中的圆
		var circle = new Kinetic.Circle({
			x: 200,
			y: 100,
			radius: 50,
			fill: "red"
		});

		//创建一个要加进组中的矩形
		var rect = new Kinetic.Rect({
			x: 300,
			y: 200,
			width: 100,
			height: 100,
			fill: "blue"
		});

		//创建group对象
		var group = new Kinetic.Group();

		//把多个图形对象添加到group里
		group.add(circle);
		group.add(rect);

		//把group对象添加到层里
		layer.add(group);

		//将层添加到舞台中
		stage.add(layer);
	};
</script>

运行结果如下:

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

# Language: js
var config = {
	x: 220,
	y: 40,
	rotationDeg: 20
};

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

4. 图形样式

4.1. 填充

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

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

4.1.1 颜色填充

# Language: js
<script>
	window.onload = function() {
		var stage = new Kinetic.Stage({
			container: "container",
			width: 600,
			height: 400
		});

		var layer = new Kinetic.Layer();

		//创建第一个矩形对象的config参数
		var config1 = {
			x: 100,
			y: 150,
			width: 100,
			height: 100,
			fill: "blue" //填充色
		};

		//创建第一个矩形对象
		var rect1 = new Kinetic.Rect(config1);

		//创建第二个矩形对象的config参数
		var config2 = {
			x: 400,
			y: 150,
			width: 100,
			height: 100,
			fill: "red" //填充色
		};

		//创建第二个矩形对象
		var rect2 = new Kinetic.Rect(config2);

		//修改第二个矩形对象的颜色
		rect2.setFill("green");
		layer.add(rect1);
		layer.add(rect2);
		stage.add(layer);
	};
</script>

运行结果如下:

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" ])

示例代码如下:

# Language: js
<script>
window.onload = function() {
	var stage = new Kinetic.Stage({
		container: "container",
		width: 600,
		height: 400
	});
	var layer = new Kinetic.Layer();

	//创建第一个矩形对象的config参数
	var config1 = {
		x: 100,
		y: 50,
		width: 400,
		height: 100,

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

	//创建第一个矩形对象
	var rect1 = new Kinetic.Rect(config1);

	//创建第二个矩形对象的config参数
	var config2 = {
		x: 100,
		y: 200,
		width: 400,
		height: 100,

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

	//创建第二个矩形对象
	var rect2 = new Kinetic.Rect(config2);

	//修改第二个矩形对象的颜色变化模式
	rect2.setAttrs({
		FillLinearGradientStartPoint:{ x: 100, y: 50 },
		FillLinearGradientEndPoint: { x: 400, y: 50 },
		FillLinearGradientColorStops: [ 0, "yellow", 0.5, "cyan", 1, "purple" ]
	})
	// 或使用下面的代码
	//	rect2.setFillLinearGradientStartPoint({ x: 100, y: 50 })
	//	rect2.setFillLinearGradientEndPoint({ x: 400, y: 50 })
	//	rect2.setFillLinearGradientColorStops([ 0, "yellow", 0.5, "cyan", 1, "purple" ])

	layer.add(rect1);
	layer.add(rect2);
	stage.add(layer);
};
</script>

运行结果如下:

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

上面的矩形渐变线为(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)点.

# Language: js
<script>
	window.onload = function() {
		var stage = new Kinetic.Stage({
			container: "container",
			width: 600,
			height: 400
		});

		var layer = new Kinetic.Layer();

		//创建第一个圆形对象的config参数
		var config1 = {
			x: 150,
			y: 200,
			radius: 100,

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

		//创建第一个圆形对象
		var circle1 = new Kinetic.Circle(config1);

		//创建第二个圆形对象的config参数
		var config2 = {
			x: 450,
			y: 200,
			radius: 100,
			//渐变色
			fillRadialGradientStartPoint: { x: 0, y: 0 },
			fillRadialGradientStartRadius: 0,
			fillRadialGradientEndPoint: { x: 0, y: 0 },
			fillRadialGradientEndRadius: 100,
			fillRadialGradientColorStops: [ 0, "red", 0.5, "green", 1, "blue" ]
		};

		//创建第二个圆形对象
		var circle2 = new Kinetic.Circle(config2);

		//修改第二个矩形对象的颜色变化模式
		circle2.setAttrs({
			fillRadialGradientStartPoint: { x: 0, y: 0 },
			fillRadialGradientStartRadius: 0,
			fillRadialGradientEndPoint: { x: 0, y: 0 },
			fillRadialGradientEndRadius: 100,
			fillRadialGradientColorStops: [ 0, "yellow", 0.5, "cyan", 1, "purple" ]
		});
		layer.add(circle1);
		layer.add(circle2);
		stage.add(layer);
	};
</script>

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

4.1.4. 图像填充

图像填充设置方式如下:

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

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

示例代码:

# Language: js
<script>
	function draw(image) {
		var stage = new Kinetic.Stage({
			container: "container",
			width: 600,
			height: 400
		});
		var layer = new Kinetic.Layer();

		//创建第一个矩形config参数
		var config1 = {
			x: 50,
			y: 100,
			width: 180,
			height: 180,
			fillPatternImage: image,
			fillPatternOffset: {x:0, y:0}
		};
		var rect1 = new Kinetic.Rect(config1);

		//创建第二个矩形config参数
		var config2 = {
			x: 350,
			y: 100,
			width: 180,
			height: 180,
			//填充图像, 并将填充图像向右下移动50个像素
			fillPatternImage: image,
			fillPatternOffset: {x:50, y:50}
		};
		var rect2 = new Kinetic.Rect(config2);

		//将填充图像向左上移动50个像素
		rect2.setAttrs({
			image: image,
			offset: { x: -50, y: -50 }
		});
		layer.add(rect1);
		layer.add(rect2);
		stage.add(layer);
	}

	window.onload = function() {
		var image = new Image();
		image.onload = function() {
			draw(image);
		};
		image.src = "FSM.jpg";
	};
</script>

上述代码运行结果如下:

4.2. 线条颜色与宽度

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

# Language: js
<script>
	// 使用构造方法的config参数设置
	var shape = new Kinetic.Circle({
		stroke: "black",
		strokeWidth: 4
	});

	// 用图形对象的方法设置
	shape.setStroke("blue");
	shape.setStrokeWidth(20);
</script>

4.3. 透明

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

# Language: js
<script>
	// 使用构造方法的config参数设置
	var shape = new Kinetic.Circle({
		alpha: 0.5
	});

	// 用图形对象的方法设置
	shape.setAlpha(1);
</script>

4.4. 阴影

# Language: js
<script>
	// 使用构造方法的config参数设置
	var shape = new Kinetic.Circle({
		shadow: {
			color: "black",
			blur: 10,
			offset: [10, 10],
			alpha: 0.5
		}
	});

	// 用图形对象的方法设置
	shape.setShadow({
		color: "black",
		blur: 10,
		offset: [10, 10],
		alpha: 0.5
	});
</script>

4.5. 线段间连接点样式

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

# Language: js
<script>
	// 使用构造方法的config参数设置
	var shape = new Kinetic.Circle({
		lineJoin: "bevel"
	});

	// 用图形对象的方法设置
	shape.setLineJoin("round");
</script>

4.6. 图形的隐藏与显示

# Language: js
<script>
	// 使用构造方法的config参数设置
	var shape = new Kinetic.Circle({
		visible: false
	});

	// 用图形对象的show方法显示图形
	shape.show();

	// 用图形对象的hide方法隐藏图形
	shape.hide();
</script>