chore(demo): update

.gitignore

@@ -11,6 +11,8 @@ yarn-error.log
 .cache
 .eslintcache
 dist
+build
+Makefile
 test.*
 
 .vscode

API.md

@@ -39,6 +39,7 @@
   - `root: Stage | null` , 根节点
   - `stage: Stage | null` , stage 节点
   - `attrMap: Record<string, boolean>` , 用于业务开发存放特殊标记属性
+  - `mask: Mask`, 实现对画布剪切, 使得可见区域为 `mask` 区域
   - `set(opt?: Partial<Transform & { alpha: number; visible: boolean }>)` - 设置旋转, 位移, 缩放, 倾斜, 透明度, 显示隐藏与否等
   - `setEventRect(x: number, y: number, width: number, height: number)` - 设置元素接受事件面积
   - `cache(x: number, y: number, width: number, height: number, dpr = 1)` - 缓存元素

README.md

@@ -2,13 +2,24 @@
 
 ​**crk** (canvas rendering kit, canvas 渲染工具集) 是基于原生 canvas api 的超轻量绘制引擎, 包含完整 **图形类**, **事件系统**, **矩阵系统**, 可轻松实现 canvas 中的各种图形绘制
 
+[demo](https://mikixing.github.io/demo/crk)
+
 <p align="center">
-  <img width="400" style="border: 1px solid #ccc;" alt="tree" src="asset/tree.gif">&emsp;
-  <img width="400" style="border: 1px solid #ccc;" alt="deformer" src="asset/deformer.gif">
+  <a target="_blank" href="https://mikixing.github.io/demo/crk/#/tree">
+    <img width="400" style="border: 1px solid #ccc;" alt="tree" src="asset/tree.gif">
+  </a>
+  &emsp;
+  <a target="_blank" href="https://mikixing.github.io/demo/crk/#/deformer">
+    <img width="400" style="border: 1px solid #ccc;" alt="deformer" src="asset/deformer.gif">
+  </a>
 </p>
 <p align="center">
-  <img width="400" style="border: 1px solid #ccc;" alt="chord" src="asset/chord.jpg">&emsp;
+   <a target="_blank" href="https://mikixing.github.io/demo/crk/#/chord">
+  <img width="400" style="border: 1px solid #ccc;" alt="chord" src="asset/chord.jpg">
+  </a>&emsp;
+   <a target="_blank" href="https://mikixing.github.io/demo/crk/#/radial-grid">
   <img width="400" style="border: 1px solid #ccc;" alt="radial" src="asset/radial.jpg">
+  </a>
 </p>
 
 #### 安装

demo/package.json

@@ -21,7 +21,7 @@
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "react-scripts build",
+    "build": "PUBLIC_URL=/demo/crk/ GENERATE_SOURCEMAP=false react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },

demo/src/App.tsx

@@ -1,9 +1,6 @@
 import React, { useEffect } from 'react'
-// import DetectCollision from './pages/DetectCollision'
-// import EventTest from './pages/EventTest'
-// import EventRect from './pages/EventRect'
 
-import { HashRouter, Navigate, Routes, Route, Link } from 'react-router-dom'
+import { Navigate, Routes, Route, Link, useLocation } from 'react-router-dom'
 import { Menu } from 'antd'
 
 import { menuList } from './config'
@@ -15,73 +12,74 @@ export default function App() {
     window.addEventListener('gestureend', e => e.preventDefault())
   })
 
+  const location = useLocation()
+  const key = menuList.findIndex(item => item.path === location.pathname) + ''
+
   return (
     <>
-      <HashRouter>
-        <nav className="nav">
-          <div
+      <nav className="nav">
+        <div
+          style={{
+            cursor: 'pointer',
+            margin: '0 24px',
+            textAlign: 'center',
+          }}
+        >
+          <a
             style={{
-              cursor: 'pointer',
-              margin: '0 24px',
-              textAlign: 'center',
+              borderBottom: '1px solid #f0f0f0',
+              padding: '10px 0',
+              display: 'block',
             }}
+            href="https://github.com/mikixing/crk"
+            rel="noreferrer"
+            target="_blank"
           >
-            <a
+            <h1
               style={{
-                borderBottom: '1px solid #f0f0f0',
-                padding: '10px 0',
-                display: 'block',
+                fontFamily: 'monospace',
+                fontSize: 28,
+                color: '#34bdff',
+                lineHeight: 1.5,
+                marginBottom: 0,
               }}
-              href="https://github.com/mikixing/crk"
-              rel="noreferrer"
-              target="_blank"
             >
-              <h1
-                style={{
-                  fontFamily: 'monospace',
-                  fontSize: 28,
-                  color: '#34bdff',
-                  lineHeight: 1.5,
-                  marginBottom: 0,
-                }}
-              >
-                crk
-              </h1>
-              <div
-                style={{
-                  fontSize: '12px',
-                  color: '#666',
-                }}
-              >
-                canvas图形绘制工具集
-              </div>
-            </a>
-          </div>
-          <Menu
-            defaultSelectedKeys={['0']}
-            mode="inline"
-            theme="light"
-            style={{ height: '100%', borderRight: 0 }}
-            className="noSelect"
-          >
-            {menuList.map(({ text, path }, i) => {
-              return (
-                <Menu.Item key={i}>
-                  <Link to={path}>{text}</Link>
-                </Menu.Item>
-              )
-            })}
-          </Menu>
-        </nav>
-        <div className="content noSelect">
-          <Routes>
-            {menuList.map(({ component, path }, i) => (
-              <Route path={path} key={i} element={component} />
-            ))}
-            <Route path="*" element={<Navigate to="/tree" />} />
-          </Routes>
+              crk
+            </h1>
+            <div
+              style={{
+                fontSize: '12px',
+                color: '#666',
+              }}
+            >
+              canvas图形绘制工具集
+            </div>
+          </a>
         </div>
-      </HashRouter>
+        <Menu
+          defaultSelectedKeys={[key]}
+          mode="inline"
+          theme="light"
+          style={{ height: '100%', borderRight: 0 }}
+          className="noSelect"
+        >
+          {menuList.map(({ text, path }, i) => {
+            return (
+              <Menu.Item key={i}>
+                <Link to={path}>{text}</Link>
+              </Menu.Item>
+            )
+          })}
+        </Menu>
+      </nav>
+      <div className="content noSelect">
+        <Routes>
+          {menuList.map(({ component, path }, i) => (
+            <Route path={path} key={i} element={component} />
+          ))}
+          <Route path="*" element={<Navigate to={menuList[0].path} />} />
+        </Routes>
+      </div>
     </>
   )
 }

demo/src/common/index.ts

@@ -8,8 +8,7 @@ interface IStdOpt {
 }
 // 1. resize
 // 2. canvas dpr处理
-// 4. 平移 缩放
-// 5. 监听帧率
+// 3. 监听帧率
 export function stdStage(stage: Stage, opt = {} as IStdOpt) {
   const { onResize } = opt
   const canvas = stage.canvas

demo/src/config.tsx

@@ -8,12 +8,16 @@ import RadialBar from './pages/RadialBar'
 import RadialGrid from './pages/RadialGrid'
 // import TransitionTest from './pages/transition-test'
 import Triangle from './pages/triangle'
+import HkMap from './pages/HkMap'
+import StackFigure from './pages/StackFigure'
+import Trangent from './pages/Tangent'
+import BoundingBox from './pages/BoundingBox'
 
 export const menuList = [
   {
-    text: 'tree - 树形图',
-    path: '/tree',
-    component: <Tree />,
+    text: '堆叠图',
+    path: '/stack-figure',
+    component: <StackFigure />,
   },
   {
     text: '图片变形器',
@@ -30,6 +34,16 @@ export const menuList = [
     path: '/decasteljau',
     component: <DeCasteljau />,
   },
+  {
+    text: 'Bézier 切线/法线',
+    path: '/tangent',
+    component: <Trangent />,
+  },
+  {
+    text: 'Bézier 边界盒子',
+    path: '/bounding-box',
+    component: <BoundingBox />,
+  },
   {
     text: '高阶 Bézier 曲线',
     path: '/high-order-bezier',
@@ -45,14 +59,19 @@ export const menuList = [
     path: '/radial-grid',
     component: <RadialGrid />,
   },
-  // {
-  //   text: '过渡动画测试',
-  //   path: '/transition-test',
-  //   component: <TransitionTest />,
-  // },
   {
     text: '三角形',
     path: '/triangle',
     component: <Triangle />,
   },
+  {
+    text: '香港地图',
+    path: '/hk-map',
+    component: <HkMap />,
+  },
+  {
+    text: 'tree - 树形图',
+    path: '/tree',
+    component: <Tree />,
+  },
 ]

demo/src/index.tsx

@@ -3,5 +3,11 @@ import ReactDOM from 'react-dom'
 import './index.css'
 import 'antd/dist/antd.css'
 import App from './App'
+import { HashRouter } from 'react-router-dom'
 
-ReactDOM.render(<App />, document.getElementById('root'))
+ReactDOM.render(
+  <HashRouter>
+    <App />
+  </HashRouter>,
+  document.getElementById('root')
+)