KineticJS教程（3）

時間 2020-08-17

標籤 kineticjs 教程简体版

原文原文鏈接

KineticJS教程（3）

做者: ysm

3.圖形對象

3.1.Shape

Kinetic提供了一個Shape對象用於在層上繪製圖形，咱們能夠經過Kinetic.Shape()構造方法返回一個Shape對象：html

<script>數組

var shape = new Kinetic.Shape(config);post

</script>ui

Shape方法的config參數是關於具體的繪圖參數的數組對象，Kinetic就是根據這個參數裏的具體信息進行繪圖的。this

Config的完整參數以下表所示:spa

Property	Description	Default	Required
drawFunc	draw function	-	required
fill	can be a color, linear gradient, radial gradient, or pattern	-	optional
stroke	stroke color	-	optional
strokeWidth	stroke width	-	optional
lineJoin	can be *miter, round*, or *bevel*	miter	optional
shadow	shadow object	-	optional
detectonType	can be *path* or *pixel*	path	optional
x	x position	0	optional
y	y position	0	optional
visible	whether or not the shape is visible	true	optional
listening	whether or not to listen to events	true	optional
id	unique shape id	-	optional
name	shape name	-	optional
alpha	shape opacity	1	optional
scale	shape scale	[1,1]	optional
rotation	rotation about the center point in radians	0	optional
rotationDeg	rotation about the center point in degrees	0	optional
centerOffset	center offset	[0,0]	optional
draggable	whether or not the shape is draggable	false	optional
dragConstraint	can be *none, horizontal*, or *vertical*	none	optional
dragBounds	drag and drop bounds	-	optional

其中最重要的參數就是drawFunc，這是一個由用戶建立的方法對象，Kinetic繪圖時就是調用的這個方法。.net

好比咱們能夠以下在頁面上畫一個矩形：htm

<!DOCTYPE html>對象

<html>繼承

<head>

<title>KineticJS</title>

</head>

<body>

window.onload = function() {

//建立舞臺

var stage = new Kinetic.Stage({

container : 「container」,

width : 600,

height : 400

});

var layer = new Kinetic.Layer();

//建立config參數

var config = {

//繪圖方法，畫一個矩形

drawFunc : function() {

var context = this.getContext();

context.rect(200, 150, 200, 100);

this.fill();

this.stroke();

//填充色

fill : 「green」,

//邊緣線顏色

stroke : 「black」,

//邊緣線寬度

strokeWidth : 4

};

//建立Shape對象

var rectShape = new Kinetic.Shape(config);

//把Shape對象添加到層裏

layer.add(rectShape);

//將層添加到舞臺中

stage.add(layer);

};

</script>

</body>

</html>

3.2.經常使用圖形

Kinetic除了有Shape能夠用於繪圖外，還爲咱們提供了一系列用於常見圖形繪製的對象，包括矩形（Rect）、圓（Circle）、圖像（Image）、精靈（Sprite）、文本（Text）、線（Line）、多邊形（Polygon）、經常使用多邊形（Regular Polygon）、路徑（Path）、星星（Star）幾種。

這幾個圖形對象都是繼承自Shape，因此使用方法與Shape相似，以一個config對象指定繪圖細節，與Shape不一樣的是，不須要咱們指定drawFunc，只須要根據圖形的類型指定關鍵參數就能夠了。

在此，咱們以Shape.Rect爲例，繪製矩形圖形的代碼以下：

<!DOCTYPE html>

<html>

<head>

<title>KineticJS</title>

</head>

<body>

window.onload = function() {

var stage = new Kinetic.Stage({

container : 「container」,

width : 600,

height : 400

});

var layer = new Kinetic.Layer();

//建立config參數

var config = {

//左上角x座標

x : 200,

//左上角y座標

y : 150,

//矩形寬度

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>

</body>

</html>

具體每種圖形的config參數細節能夠參見Kinetic的文檔。

3.3.圖形組

Kinetic提供了Group對象，用於把若干個不一樣的圖形對象，或者是其餘的Group對象組合成一個複雜的圖形進行統一管理。

好比，咱們建立一個包含一個矩形和一個圓的group，並添加到層中顯示出來。

<!DOCTYPE html>

<html>

<head>

<title>KineticJS</title>

</head>

<body>

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>

</body>

</html>

因爲Group繼承自Node，而Shape也是繼承自Node，所以，Group的一些屬性和行爲也和Shape比較相似，好比Group的構造方法也能夠像接受一個config參數配置Group的位置、旋轉、縮放等屬性。

如：

var config = {

x : 220,

y : 40,

rotationDeg : 20

};

或者也能夠不在建立group時經過config參數設定，而是建立group對象後經過相對應的方法設定各屬性，好比x和y參數就能夠分別用group.setX(220)和group.setY(20)來設定。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。