基于 SVG 的矢量圖形庫：Kity Vector Libary

jopen 10年前發布 | 17K 次閱讀圖形/圖像處理 Kity Vector Libary

Kity 是一個基于 SVG 的矢量圖形庫，幫助你快速在頁面上創建和使用矢量元素。

面向對象的接口風格

在 Kity 里，所有圖形，以及交換的數據，都是以強類型的對象出現的，可以非常方便地使用和拓展它們。
豐富的圖形

Kity 內置了的圖形，包括矩形、圓形、橢圓、多邊形、自動曲線、直線、正多邊形、星形、餅、環、旋轉形等等，還有最強大的 Path 工具，可以繪制任意矢量圖形
強大的填充能力

Kity 對顏色加強了支持，不僅能隨意使用 RGB 或 HSL 進行顏色的配置，還支持調色板的定義和使用。Kity 同時支持漸變和紋理的使用，可以讓矢量元素更加生動豐富。
完善的坐標變換能力

在 Kity 中，對圖形進行平移、旋轉、縮放等變換是非常簡單的。而且，這些變換的綜合結果還可以獲取，用于圖形學的一些計算。
靈活的動畫支持

Kity 內置了一個靈活的動畫引擎，你可以使用該引擎方便靈活地創建和使用動畫。動畫創建的時間線還可以進一步控制：暫停、停止、循環等。同時提供最底層的動畫接口，讓你有完全的動畫能力。
必不可少的事件處理

對于需要創建交互的應用來說，事件是必不可少的。Kity 允許你在圖形上綁定各種各樣的事件，并且可以幫你精確的計算事件發生的坐標（你還可以指定坐標系）。這個是非常重要的，不是嗎？
文本支持

Kity 在文本的支持上下了苦工，你可以方便地定位文本和設置文本的樣式。你還可以使用路徑文本，讓一個文本沿著指定的路徑排列。
濾鏡支持

Kity 支持最常用的 SVG 濾鏡，而且為您預留了接口，可以快速拓展。
強大的圖形學支持

這個在圖形應用當中也是非常重要的。在 Kity 中，你可以輕松獲取圖形在指定坐標系下的區域，支持區域的合并、變換操作。Kity 同時對貝塞爾曲線和路徑提供了很多有用的工具，比如切割、求字段、求補間等。

開始使用

要開始使用 kity，你需要先在頁面中引用 kity.min.js：

// 引用本地的 kity 庫
<script type="text/javascript" src="lib/kity.min.js"></script>


// 使用 git 的 CDN 服務引用
<script type="text/javascript" src="https://cdn.rawgit.com/fex-team/kity/dev/dist/kity.min.js"></script>

然后，你就可以在任何的元素上創建 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>