49 Star 388 Fork 84

quark-renderer / quark-renderer

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
BSD-3-Clause

QuarkRenderer

一款轻量且强大的 Canvas(&SVG) 渲染引擎,从 ZRender 改进而来。

主页:https://quark-renderer.gitee.io

背景

重要:Quark Renderer 不是从零开始构建的,它是从 ZRender 魔改而来,ZRender 是 ECharts 底层的渲染引擎。

我已经使用 ECharts 和 ZRender 很多年,在图形化领域,这两款工具都极其强大。

为了更好地理解 ZRender 底层的设计思想,最近我花了一些时间通读了它的源代码(2020-01)。在这个过程中,重构了大量的代码和注释,因为:

  • 我想要一个定制化的版本,方便将来实现一些很酷的功能。
  • 我想要一个更加干净的代码仓库,方便用来教我的学生们如何理解和设计一款 canvas 引擎,用于浏览器环境和微信小程序。
  • 我想让引擎本身的代码变得更加易读一些。
  • 之所以重新起了一个名字,主要原因有两个:首先,ZRender 默认会在全局空间里面导出一个全局变量 'zrender',所以起一个新的名字可以避免潜在的命名冲突问题。其次,在 npm registry 里面不允许创建重名的项目。

与 ZRender 原始的实现相比,我的这个版本重点提升了这些特性:

  • 用 ES6 语法重构了所有 class 和 .js 文件。
  • 添加了键盘事件支持。
  • 可以同时拖拽多个元素,按住 Ctrl 键复选。
  • 为了让源代码更好理解,大幅度重构了 .js 文件和目录结构。
  • 为了理解方便,重构了大量的实现细节。
  • 修复了 /test 目录下一些案例中的 bug ,新增了一些测试案例。
  • jsduck 来自动生成 API 文档,文档格式更加优美。
  • 为了让 jsduck 能更好地生成文档,重构了所有代码注释。
  • 直接支持微信小程序,不需要任何 hack。(还有一些问题需要解决)
  • 直接支持 node-canvas,不需要任何 hack。(还有一些问题需要解决)
  • 删掉了 VML 引擎,因为微软已经在 2012 年宣布放弃 VML 了,删掉 VML 模块之后,QuarkRenderer 的体积变得更小了。
  • 给仿射变换系统增加了 skew 特性。
  • 给元素加上了变换控制手柄。
  • 增加了连线功能,可以把元素连接起来,包括很酷的 Visio 形的连线。
  • 重构了 Group 的实现,可以多层嵌套并控制子元素的位置。

用法

  • 把本仓库 pull 到你本地。
  • 在项目根目录运行 npm build 。
  • 在你的浏览器中打开 /test 目录下提供的案例。

浏览器环境中的用法:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Animation</title>
    <script src="../dist/quark-renderer.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      html,
      body,
      #main {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="main"></div>
    <script type="text/javascript">
      let main = document.getElementById('main');
      let qr = QuarkRenderer.init(main);

      let gradient = new QuarkRenderer.LinearGradient();
      gradient.addColorStop(0, 'red');
      gradient.addColorStop(1, 'black');

      let circle = new QuarkRenderer.Circle({
        position: [0, 0],
        scale: [1, 1],
        shape: {
          cx: 50,
          cy: 50,
          r: 50,
        },
        style: {
          fill: gradient,
          lineWidth: 5,
          text: 'circle',
          textPosition: 'inside',
        },
      });
      qr.add(circle);

      // first animation process
      circle
        .animate()
        .when(1000, {
          position: [200, 0],
          scale: [2, 1],
        })
        .when(2000, {
          position: [200, 200],
          scale: [1, 1],
        })
        .when(3000, {
          position: [0, 200],
          scale: [1, 2],
        })
        .when(4000, {
          position: [0, 0],
          scale: [1, 1],
        })
        .during(function () {
          console.log(circle.animationProcessList.length);
        })
        .done(function () {
          console.log(circle.animationProcessList.length);
        })
        .start(); //.start(true)

      //second animation process
      circle
        .animate()
        .when(1000, {
          position: [500, 0],
          scale: [2, 1],
        })
        .when(2000, {
          position: [200, 200],
          scale: [1, 1],
        })
        .when(3000, {
          position: [0, 200],
          scale: [1, 2],
        })
        .when(4000, {
          position: [0, 0],
          scale: [1, 1],
        })
        .during(function () {
          console.log(circle.animationProcessList.length);
        })
        .done(function () {
          console.log(circle.animationProcessList.length);
        })
        .start(); //.start(true)
    </script>
  </body>
</html>

微信小程序中的用法:

<view class="page">
  <view class="page__hd">
    <view class="page__title">Quark Renderer 小程序示例1</view>
  </view>
  <view class="page__bd page__bd_spacing">
    <view style="width:100%;height:500px;">
      <canvas style="width: 300px; height: 500px;" canvas-id="firstCanvas"></canvas>
    </view>
  </view>
</view>
onReady: function () {
    let ctx = wx.createCanvasContext('firstCanvas');
    //注意这里的初始化参数,因为微信小程序不允许操作 DOM,所以引擎不能自动获取到宽度高度,这里需要手动传进去
    let qr = QuarkRenderer.init(ctx,{width:300,height:500,renderer:'canvas'});
    let polygon = new QuarkRenderer.Polygon({
        position: [100, 100],
        scale: [1, 1],
        style: {
            fill: 'red'
        }
    });

    setInterval(function () {
        let len = Math.round(Math.random() * 100);
        let points = [];
        let r = (Math.random() * 100);
        for (let i = 0; i <= len; i++) {
            let phi = i / len * Math.PI * 2;
            let x = Math.cos(phi) * r + 100;
            let y = Math.sin(phi) * r + 100;
            points.push([x, y]);
        }
        polygon.animateTo({
            shape: {
                points: points
            }
        }, 500, 'cubicOut');
    }, 1000);
    qr.add(polygon);
}

文档

API 文档位于 /api 目录下,在你的浏览器中打开 /api/index.html 就可以看到很漂亮的 API 文档了,风格与 Sencha(ExtJS) 相同。

屏幕截图









VisioLink, 像 Microsoft Visio 中的那种连接线效果。

微信小程序示例:

学习资源

https://cloud.tencent.com/edu/learning/live-1902?ADTAG=xyj

License

BSD 3-Clause License

LICENSE

BSD 3-Clause License Copyright (c) 2017, Baidu Inc. All rights reserved. Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: * Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. * Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. * Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission. THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

简介

一款轻量且强大的 Canvas(&SVG) 渲染引擎,从 ZRender 改进而来。 展开 收起
JavaScript 等 4 种语言
BSD-3-Clause
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/quark-renderer/quark-renderer.git
git@gitee.com:quark-renderer/quark-renderer.git
quark-renderer
quark-renderer
quark-renderer
master

搜索帮助

14c37bed 8189591 565d56ea 8189591