4.圖形樣式
4.1.填充
Kinetic中圖形的填充屬性能夠在構造方法中的config參數中的fill屬性進行設定，也能夠用圖形對象的setFill方法進行設定。不過要注意，setFill使用的填充類型必須與建立這個對象時的config中所用的填充類型相同。javascript
Kinetic支持顏色、圖像、線性漸變和徑向漸變四種填充模式。html
4.1.1.顏色填充
<!DOCTYPE html>java
<html>canvas
<head>ide
<meta charset=「UTF-8″>post
<title>KineticJS</title>spa
<script src=「../kinetic.js」></script>.net
</head>htm
<body>對象
<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>
<div id=「container」></div>
</body>
</html>
4.1.2.線性漸變填充
線性漸變填充的fill參數值以下：
{ start: { x: 100, y: 50 }, end: { x: 500, y: 50 }, colorStops: [0, "red", 0.5, "green", 1, "blue"] }
的形式，start是線性漸變線的起點位置，end是線性漸變線的終點位置，colorStops是指定線性漸變線上關鍵點的顏色值，位置參數是一個介於0到1之間的浮點數，0表示起點的顏色，1表示終點的顏色。
這裏要注意的是，漸變線的座標基點並非以canvas左上角爲(0, 0)點，若是是圖形對象是矩形的話，矩形的左上角點纔是(0, 0)點，若是是圓形對象的話，圓心纔是(0, 0)點。
<!DOCTYPE html>
<html>
<head>
<meta charset=「UTF-8″>
<title>KineticJS</title>
<script src=「../kinetic.js」></script>
</head>
<body>
<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,
//漸變色
fill : {
start : {
x : 0,
y : 50
},
end : {
x : 400,
y : 50
},
colorStops : [ 0, "red", 0.5, "green", 1, "blue" ]
}
};
//建立第一個矩形對象
var rect1 = new Kinetic.Rect(config1);
//建立第二個矩形對象的config參數
var config2 = {
x : 100,
y : 200,
width : 400,
height : 100,
//漸變色
fill : {
start : {
x : 0,
y : 50
},
end : {
x : 400,
y : 50
},
colorStops : [ 0, "red", 0.5, "green", 1, "blue" ]
}
};
//建立第二個矩形對象
var rect2 = new Kinetic.Rect(config2);
//修改第二個矩形對象的顏色變化模式
rect2.setFill({
start : {
x : 100,
y : 50
},
end : {
x : 400,
y : 50
},
colorStops : [ 0, "yellow", 0.5, "cyan", 1, "purple" ]
});
layer.add(rect1);
layer.add(rect2);
stage.add(layer);
};
</script>
<div id=「container」></div>
</body>
</html>
上述代碼的漸變效果圖以下：
上面的矩形漸變線爲(0, 50)到(400, 50)，正如上面提到的，這裏的漸變線是以這個矩形的左上角爲(0, 0)點的，因此實際的漸變線是如黑線條所示的區域，而下面的矩形因爲setFill的修改，漸變線爲(100, 50)到(400, 50)，因此實際漸變線是圖上所示的黑線區域，而不是整個矩形的範圍。不要把漸變線的座標理解爲相對於canvas的左上角。
4.1.3.徑向漸變填充
徑向漸變填充的fill參數值以下：
{ start: { x: 100, y: 50, radius: 100 }, end: { x: 500, y: 50, radius: 100 }, colorStops: [0, "red", 0.5, "green", 1, "blue"] }
的形式，start是徑向漸變的起始圓位置，end是徑向漸變的終止圓位置，colorStops是指定徑向漸變圓間的關鍵距離的顏色值，位置參數是一個介於0到1之間的浮點數，0表示起始圓的顏色，1表示終止圓的顏色。
這裏要注意的是，與線性漸變相似，漸變圓的圓心座標基點並非以canvas左上角爲(0, 0)點，若是是圖形對象是矩形的話，矩形的左上角點纔是(0, 0)點，若是是圓形對象的話，圓心纔是(0, 0)點。
<!DOCTYPE html>
<html>
<head>
<meta charset=「UTF-8″>
<title>KineticJS</title>
<script src=「../kinetic.js」></script>
</head>
<body>
<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,
//漸變色
fill : {
start : {
x : 0,
y : 0,
radius : 0
},
end : {
x : 0,
y : 0,
radius : 100
},
colorStops : [ 0, "red", 0.5, "green", 1, "blue" ]
}
};
//建立第一個圓形對象
var circle1 = new Kinetic.Circle(config1);
//建立第二個圓形對象的config參數
var config2 = {
x : 450,
y : 200,
radius : 100,
//漸變色
fill : {
start : {
x : 0,
y : 0,
radius : 0
},
end : {
x : 0,
y : 0,
radius : 100
},
colorStops : [ 0, "red", 0.5, "green", 1, "blue" ]
}
};
//建立第二個圓形對象
var circle2 = new Kinetic.Circle(config2);
//修改第二個矩形對象的顏色變化模式
circle2.setFill({
start : {
x : 0,
y : 0,
radius : 0
},
end : {
x : 0,
y : 0,
radius : 100
},
colorStops : [ 0, "yellow", 0.5, "cyan", 1, "purple" ]
});
layer.add(circle1);
layer.add(circle2);
stage.add(layer);
};
</script>
<div id=「container」></div>
</body>
</html>
上述代碼的效果以下圖：
4.1.4.圖像填充
圖像填充的fill參數值以下：
{ image : imageObj, offset : { x : 0, y : 0 }
imageObj是javascript的Image對象，offset是圖像開始填充的位置偏移量。
<!DOCTYPE html>
<html>
<head>
<meta charset=「UTF-8″>
<title>KineticJS</title>
<script src=「../kinetic.js」></script>
</head>
<body>
<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,
//填充圖像
fill : {
image : image,
offset : {
x : 0,
y : 0
}
}
};
var rect1 = new Kinetic.Rect(config1);
//建立第二個矩形config參數
var config2 = {
x : 350,
y : 100,
width : 180,
height : 180,
//填充圖像，並將填充圖像向右下移動50個像素
fill : {
image : image,
offset : {
x : 0,
y : 0
}
}
};
var rect2 = new Kinetic.Rect(config2);
//將填充圖像向左上移動50個像素
rect2.setFill({
//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>
<div id=「container」></div>
</body>
</html>
上述代碼的效果以下圖：
4.2.線條顏色與寬度
線條對象與其餘圖形的邊緣線的顏色與寬度設置以下：
<script>
// 使用構造方法的config參數設置
var shape = new Kinetic.Circle({
stroke: 「black」,
strokeWidth: 4
});
// 用圖形對象的方法設置
shape.setStroke(「blue」);
shape.setStrokeWidth(20);
</script>
4.3.透明
透明度是一個0到1之間的浮點值，0表示徹底透明，1則是徹底不透明。
<script>
// 使用構造方法的config參數設置
var shape = new Kinetic.Circle({
alpha: 0.5
});
// 用圖形對象的方法設置
shape.setAlpha(1);
</script>
4.4.陰影
<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。
<script>
// 使用構造方法的config參數設置
var shape = new Kinetic.Circle({
lineJoin: 「bevel」
});
// 用圖形對象的方法設置
shape.setLineJoin(「round」);
</script>
4.6.圖形的隱藏與顯示
<script>
// 使用構造方法的config參數設置
var shape = new Kinetic.Circle({
visible: false
});
// 用圖形對象的show方法顯示圖形
shape.show();
// 用圖形對象的hide方法隱藏圖形
shape.hide();
</script>