paper and shape

画布与图形

在 Kity 中，画布用 Paper 表示，它是最基本的绘图容器。

Paper

创建画布

创建一个 Paper 很简单：

var paper = new kity.Paper('container');

上述代码会把画布渲染到 id 为 container 的容器上。

设置尺寸

默认画布会占满容器，如果需要，可以指定画布的尺寸：

paper.setWidth(800);
paper.setHeight(600);

管理图形

在 Paper 上可以任意添加、移除图形：

var rect = new kity.Rect();
rect.setWidth(30);
rect.setHeight(30);

// 添加单个图形
paper.addShape(rect);

// 也可以批量添加
paper.addShapes([rect1, rect2, ...]);

// 移除图形
paper.removeShape(rect);

// 或者更简单的：
rect.remove();

也可以获取已有的图形：

// 获得所有图形
var shapes = paper.getShapes();

// 获得具有指定 id 的图形
var rect = paper.getShapeById('rect');

Rect

矩形是这个世界上最容易理解的图形之一。在 kity 中矩形使用非常简单：

创建矩形

// 创建一个大小是 200 x 100 的矩形
var rect = new kity.Rect(200, 100)