Kity基于 SVG 的矢量圖形庫
Kity 是一個(gè)基于 SVG 的矢量圖形庫，幫助你快速在頁面上創(chuàng)建和使用矢量元素。
-
面向?qū)ο蟮慕涌陲L(fēng)格
在 Kity 里，所有圖形，以及交換的數(shù)據(jù)，都是以強(qiáng)類型的對象出現(xiàn)的，可以非常方便地使用和拓展它們。
-
豐富的圖形
Kity 內(nèi)置了的圖形，包括矩形、圓形、橢圓、多邊形、自動(dòng)曲線、直線、正多邊形、星形、餅、環(huán)、旋轉(zhuǎn)形等等，還有最強(qiáng)大的 Path 工具，可以繪制任意矢量圖形
-
強(qiáng)大的填充能力
Kity 對顏色加強(qiáng)了支持，不僅能隨意使用 RGB 或 HSL 進(jìn)行顏色的配置，還支持調(diào)色板的定義和使用。Kity 同時(shí)支持漸變和紋理的使用，可以讓矢量元素更加生動(dòng)豐富。
-
完善的坐標(biāo)變換能力
在 Kity 中，對圖形進(jìn)行平移、旋轉(zhuǎn)、縮放等變換是非常簡單的。而且，這些變換的綜合結(jié)果還可以獲取，用于圖形學(xué)的一些計(jì)算。
-
靈活的動(dòng)畫支持
Kity 內(nèi)置了一個(gè)靈活的動(dòng)畫引擎，你可以使用該引擎方便靈活地創(chuàng)建和使用動(dòng)畫。動(dòng)畫創(chuàng)建的時(shí)間線還可以進(jìn)一步控制：暫停、停止、循環(huán)等。同時(shí)提供最底層的動(dòng)畫接口，讓你有完全的動(dòng)畫能力。
-
必不可少的事件處理
對于需要?jiǎng)?chuàng)建交互的應(yīng)用來說，事件是必不可少的。Kity 允許你在圖形上綁定各種各樣的事件，并且可以幫你精確的計(jì)算事件發(fā)生的坐標(biāo)（你還可以指定坐標(biāo)系）。這個(gè)是非常重要的，不是嗎？
-
文本支持
Kity 在文本的支持上下了苦工，你可以方便地定位文本和設(shè)置文本的樣式。你還可以使用路徑文本，讓一個(gè)文本沿著指定的路徑排列。
-
濾鏡支持
Kity 支持最常用的 SVG 濾鏡，而且為您預(yù)留了接口，可以快速拓展。
-
強(qiáng)大的圖形學(xué)支持
這個(gè)在圖形應(yīng)用當(dāng)中也是非常重要的。在 Kity 中，你可以輕松獲取圖形在指定坐標(biāo)系下的區(qū)域，支持區(qū)域的合并、變換操作。Kity 同時(shí)對貝塞爾曲線和路徑提供了很多有用的工具，比如切割、求字段、求補(bǔ)間等。
開始使用
要開始使用 kity，你需要先在頁面中引用 kity.min.js：
// 引用本地的 kity 庫 <script type="text/javascript" src="lib/kity.min.js"></script> // 使用 git 的 CDN 服務(wù)引用 <script type="text/javascript" src="https://cdn.rawgit.com/fex-team/kity/dev/dist/kity.min.js"> </script>
然后，你就可以在任何的元素上創(chuàng)建 kity 的畫布：
<div id="kity_paper"></div><script type="text/javascript">
var paper = new kity.Paper('kity_paper');
var rect = paper.put(new kity.Rect());
var text = paper.put(new kity.Text());
text.setContent('hello kity!');
text.fill('white');
text.setX(100);
text.setY(200);
rect.setBox(text.getBoundaryBox().expand(-15, -10, 15, 10));
rect.setRadius(5);
rect.fill('blue');</script>
更詳細(xì)的使用方法請參考 wiki。