2.0.4 • Published 6 years ago

kity v2.0.4

Weekly downloads
123
License
-
Repository
github
Last release
6 years ago

Kity Vector Libary Build Status

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>

Hello Kity

更详细的使用方法请参考 wiki

贡献

如果您在使用的过程中发现任何问题,欢迎给我们提 issue

如果您是开发者,可以直接给我们提 Pull Requst

联系我们

Email: kity@baidu.com

kity-minder-hejinkityminder-core-forkvue-minder-editor-casetest-publish-jokey-testzxr-new-componentszxr-new-renders@everything-registry/sub-chunk-2017infosec-kityminder-coreinfosecabcd-kityminder-coreinfosecqa-kityminder-corekcminderkityminder-case-caihrckityminder-case-corekityminder-case-pluginkityminder-case-reactkityminder-case-vuekityminder-corekityminder-core-extendkityminder-core-fc-tmpkityminder-core-hookkityminder-core-jassykityminder-core-linkkityminder-core-linkskityminder-core-newkityminder-core-prokityminder-core-v2kityminder-editor-pluginkityminder-reactkityminder-vuezhl-kityminder@infinitebrahmanuniverse/nolb-kitlbd-mindyqh-kity-minderjlzkjc-kityminder-editormindmap-core-v1mind-coremind-editor-vuesimmindcm-rendercscec-crud-jsgitee-team-kity-coremario-vue-minder-editor-plus@orh/vue-kitymindersugar-mind-coretest_case_minder_vuetestcase-factor-minder-editortestcase-mindertestcase-minder-editor-vue@zhaopengme/myeditormy-editor-customamos-minderadl-mindeditor-vuepm-minder-editor@zalastax/nolb-kittideswing-minder-editor@taichaoren/kityminder-editor@taichaoren/vue-minder-editorvue-kity-xmind-editvue-kityminder-calmvue-kityminder-editorvue-kityminder-editor-v3vue-kityminder-gg-hejinvue-kityminder-gg-zzwlreact-agiletc-editorreact-agiletc-editor-testreact-agiletc-minder-editorreact-agiletc-minder-editor-fistbumpvue-editor-gbasevue-mindervue-minder-editorvue-minder-editor-antvvue-minder-editor-bvue-minder-editor-magic-jdfvue-minder-editor-plus-qjievue-minder-editor-plus-testvue-minder-editor-plus-v2vue-minder-editor-provue-minder-testcasevue-minder-viewervue-minder-zgsyvue-minder-editor-fmetvue-minder-editor-magicreact-sl-minder-editortcm-kityminder-coreutp-minder-editorvue-situation-minder-editorvue-testcase-minder-editorvue-testcase-minder-editor-customvue-testcase-minder-editor-custom-minevue-testcase-minder-editor-custom-xmindvue-testcase-minder-editor-jettovue-testcase-minder-editor-xmindvue-testcase-minder-editor-xmind-minevue-testcase-minder-editor1vue-testcase-minder-editor2vue-testcase-minder-editor3vue-testcase-minder-editor4vue-testcase-minder-editor5@bennowu/kityminder-corevue_kityminder_plus
2.0.4

6 years ago

0.0.0

6 years ago