javascript
KineticJS教程（3）
KineticJS教程（3）
作者: ysm??
?3.圖形對象
?
?
3.1.Shape
?
Kinetic提供了一個Shape對象用于在層上繪制圖形，我們可以通過Kinetic.Shape()構造方法返回一個Shape對象：
?
?
<script>
?
var shape = new Kinetic.Shape(config);
?
</script>
?
?
Shape方法的config參數是關于具體的繪圖參數的數組對象，Kinetic就是根據這個參數里的具體信息進行繪圖的。
?
Config的完整參數如下表所示:
?
| 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繪圖時就是調用的這個方法。
?
比如我們可以如下在頁面上畫一個矩形：
?
?
<!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 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>
?
<div id=“container”></div>
?
</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>
?
<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 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>
?
<div id=“container”></div>
?
</body>
?
</html>
?
?
具體每種圖形的config參數細節可以參見Kinetic的文檔。
?
3.3.圖形組
?
Kinetic提供了Group對象，用于把若干個不同的圖形對象，或者是其他的Group對象組合成一個復雜的圖形進行統一管理。
?
比如，我們創建一個包含一個矩形和一個圓的group，并添加到層中顯示出來。
?
?
<!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();
?
//創建一個要加進組中的圓
?
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>
?
<div id=“container”></div>
?
</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)來設定。
轉載于:https://www.cnblogs.com/zhangleblog/p/3912169.html
總結
以上是生活随笔為你收集整理的KineticJS教程（3）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： C数据类型之基本类型
- 下一篇： nodeJS下利用mongdb进行数据库