49 Star 388 Fork 84

quark-renderer / quark-renderer

Create your Gitee Account
Explore and code with more than 12 million developers,Free private repositories !:)
Sign up
Clone or Download
contribute
Sync branch
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README
BSD-3-Clause

Quark Renderer

A lightweight yet powerful Canvas(&SVG) render engine improved from ZRender

Home page https://quark-renderer.gitee.io

Background

Important: Quark Renderer is not built from scratch, but improved from ZRender, which is the render engine behind ECharts.

I have used ECharts and ZRender for many years, both of them are extremly powerful tools for making some charting stuff.

To better understand the core ideas behind ZRender, I spent some days (2020-01) to read through its source code. In this process, I refactored a bunch of code and comments, because:

  • I want a very customized version to implement some cool stuff in the future.
  • I want a cleaner repo to teach my students how to understand and design a canvas engine for modern web and Wechat mini-programs.
  • I want to make the code easier to read.
  • There are two reasons why I have to pick up a new name for this project. Firstly, ZRender exported a global variable 'zrender', therefore a new name can avoid potential conflicts. Secondly, duplicated names are not allowed in npm registry.

Here are the key improvements compare to the original ZRender:

  • Modified a bunch of classes and .js files with ES6 syntax.
  • Added keyboard event support.
  • Added multi drag-drop feature.
  • Refactored the structure of .js files and directories for better understanding.
  • Refactored some implementation details for better understanding.
  • Fixed some bugs in /test directory, added a few test cases.
  • Use jsduck for better API documentation.
  • Refactored all the comments for jsduck.
  • Support Wechat mini-program directly, do not need any hack.
  • Support node-canvas environment directly, do not need any hack.
  • Removed VML engine, because MicroSoft has abandoned this engine since 2012, by removing VML module we can make the bundle of QuarkRenderer smaller.
  • Added skew feature for transformation system.
  • Added transform control for elements.
  • Added link control for lines and shapes including a Microsoft Visio like link line, so we can link these elements now.
  • Refactored Group so that it can be nested and restrict the position of child nodes.

Usage

  • Pull this repo to your local device.
  • Run npm build.
  • Check the examples inside /test directory.

Browser example:

<!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>

Wechat mini-program example:

<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);
}

Document

The document is in /api directory, open /api/index.html in your browser then you can see a beautiful API document just like Sencha(ExtJS).

ScreenShots









VisioLink like the line in Microsoft Visio.

Wechat mini-program example:

Resources

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.

About

一款轻量且强大的 Canvas(&SVG) 渲染引擎,从 ZRender 改进而来。 expand collapse
JavaScript and 4 more languages
BSD-3-Clause
Cancel

Releases

No release

Contributors

All

Activities

Load More
can not load any more
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

Search