README_zh.md · OSCHINA-MIRROR/quark-renderer-quark-renderer

QuarkRenderer

Это облегчённый и мощный движок для рендеринга Canvas (и SVG), созданный на основе ZRender.

Главная страница: https://quark-renderer.gitee.io

История

Важно: Quark Renderer не создавался с нуля, он был переработан из ZRender, который является базовым движком рендеринга для ECharts.

Я много лет использовал ECharts и ZRender в области визуализации данных, и оба инструмента оказались очень мощными.

Чтобы лучше понять дизайн ZRender на уровне исходного кода (2020-01), я потратил некоторое время на его изучение. В ходе этого процесса я переработал большое количество кода и комментариев, потому что:

Я хотел создать индивидуальную версию, чтобы в будущем реализовать некоторые интересные функции.
Я хотел иметь более чистый репозиторий кода, чтобы использовать его для обучения моих студентов тому, как понимать и проектировать движок Canvas для браузерной среды и мини-программ WeChat.
Я хотел сделать код движка более читаемым.
Основная причина, по которой я решил дать ему новое имя, заключается в том, что ZRender по умолчанию экспортирует глобальную переменную «zrender» в глобальное пространство имён, поэтому создание нового имени помогает избежать потенциальных конфликтов имён. Кроме того, в реестре npm не разрешается создавать проекты с повторяющимися именами.

По сравнению с оригинальной реализацией ZRender, моя версия фокусируется на следующих улучшениях:

Все классы и файлы .js были переписаны с использованием синтаксиса ES6.
Добавлена поддержка событий клавиатуры.
Можно одновременно перетаскивать несколько элементов, удерживая нажатой клавишу Ctrl.
Для лучшего понимания структура файлов и каталогов .js была значительно переработана.
Многие детали реализации были переработаны для облегчения понимания.
Исправлены ошибки в некоторых примерах в каталоге /test, добавлены новые тестовые примеры.
Используется jsduck для автоматического создания документации API, формат документации стал более привлекательным.
Весь код был переписан для улучшения генерации документации с помощью jsduck.
Прямая поддержка мини-программы WeChat без необходимости каких-либо хаков (всё ещё есть некоторые проблемы, которые необходимо решить).
Прямая поддержка node-canvas без необходимости каких-либо хаков (всё ещё есть некоторые проблемы, которые необходимо решить).
Удалено использование VML-движка, поскольку Microsoft объявила о прекращении поддержки VML в 2012 году, удаление модуля VML сделало QuarkRenderer меньше.
Система аффинных преобразований получила дополнительную функцию skew.
Элементы получили управление преобразованием.
Реализована функция соединения элементов, включая впечатляющие линии Visio.
Переработана реализация Group, позволяя многоуровневое вложение и контроль над положением дочерних элементов.

Использование

Загрузите этот репозиторий на свой компьютер.
Запустите 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>

Использование в мини-программе WeChat:

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

OSCHINA-MIRROR/quark-renderer-quark-renderer

История

Использование

Введение

Обновления

Участники

Недавние действия

OSCHINA-MIRROR/quark-renderer-quark-renderer .gitee-modal { min-width: 500px !important; } .gitee-modal .close { right: 0.6rem !important; }

История

Использование

Введение

Обновления

Участники

Недавние действия

OSCHINA-MIRROR/quark-renderer-quark-renderer