源码分析
This page demonstrates usage of some of the runtime APIs provided by VitePress.
The main useData() API can be used to access site, theme, and page data for the current page. It works in both .md and .vue files:
md
<script setup>
import { useData } from 'vitepress'
const { theme, page, frontmatter } = useData()
</script>
## Results
### Theme Data
<pre>{{ theme }}</pre>
### Page Data
<pre>{{ page }}</pre>
### Page Frontmatter
<pre>{{ frontmatter }}</pre>Results
Theme Data
{
"logo": "/favicon.svg",
"siteTitle": "Konva 文档",
"nav": [
{
"text": "首页",
"link": "/"
},
{
"text": "教程",
"link": "/tutorial/intro"
},
{
"text": "API",
"link": "/api/konva"
},
{
"text": "演示",
"link": "/demo/overview"
},
{
"text": "源码分析",
"link": "/analysis/overview"
},
{
"text": "要点",
"link": "/analysis/key-point-mindmap"
}
],
"search": {
"provider": "local"
},
"outline": {
"level": "deep",
"label": "页面导航"
},
"sidebar": {
"/tutorial/": [
{
"text": "教程",
"items": [
{
"text": "介绍",
"link": "/tutorial/intro"
},
{
"text": "概览",
"link": "/tutorial/overview"
},
{
"text": "AI 工具",
"link": "/tutorial/ai-tools"
},
{
"text": "支持",
"link": "/tutorial/support"
},
{
"text": "捐赠",
"link": "/tutorial/donate"
},
{
"text": "形状",
"collapsed": true,
"items": [
{
"text": "Arc 弧形",
"link": "/tutorial/shapes/arc"
},
{
"text": "Arrow 箭头",
"link": "/tutorial/shapes/arrow"
},
{
"text": "Circle 圆形",
"link": "/tutorial/shapes/circle"
},
{
"text": "Custom Shape 自定义",
"link": "/tutorial/shapes/custom"
},
{
"text": "Ellipse 椭圆",
"link": "/tutorial/shapes/ellipse"
},
{
"text": "Group 组",
"link": "/tutorial/shapes/group"
},
{
"text": "Image 图片",
"link": "/tutorial/shapes/image"
},
{
"text": "Label 标签",
"link": "/tutorial/shapes/label"
},
{
"text": "Line 线",
"link": "/tutorial/shapes/line"
},
{
"text": "Line - Blob 不规则图形",
"link": "/tutorial/shapes/line_blob"
},
{
"text": "Line - Polygon 多边形",
"link": "/tutorial/shapes/line_polygon"
},
{
"text": "Line - Simple Line 线",
"link": "/tutorial/shapes/line_simple_line"
},
{
"text": "Line - Spline 曲线",
"link": "/tutorial/shapes/line_spline"
},
{
"text": "Path 路径",
"link": "/tutorial/shapes/path"
},
{
"text": "Rectangle 矩形",
"link": "/tutorial/shapes/rectangle"
},
{
"text": "Regular Polygon 正多边形",
"link": "/tutorial/shapes/regular-polygon"
},
{
"text": "Ring 圆环",
"link": "/tutorial/shapes/ring"
},
{
"text": "Sprite 精灵图",
"link": "/tutorial/shapes/sprite"
},
{
"text": "Star 星形",
"link": "/tutorial/shapes/star"
},
{
"text": "Text 文本",
"link": "/tutorial/shapes/text"
},
{
"text": "TextPath 文本路径",
"link": "/tutorial/shapes/text-path"
},
{
"text": "Wedge 楔形",
"link": "/tutorial/shapes/wedge"
}
]
},
{
"text": "样式",
"collapsed": true,
"items": [
{
"text": "填充",
"link": "/tutorial/styling/fill"
},
{
"text": "描边",
"link": "/tutorial/styling/stroke"
},
{
"text": "不透明度",
"link": "/tutorial/styling/opacity"
},
{
"text": "阴影",
"link": "/tutorial/styling/shadow"
},
{
"text": "线拐点",
"link": "/tutorial/styling/line-join"
},
{
"text": "隐藏与显示",
"link": "/tutorial/styling/hide-show"
},
{
"text": "鼠标样式",
"link": "/tutorial/styling/mouse-cursor"
},
{
"text": "混合模式",
"link": "/tutorial/styling/blend-mode"
},
{
"text": "填充/描边顺序",
"link": "/tutorial/styling/fill-stroke-order"
}
]
},
{
"text": "事件",
"collapsed": true,
"items": [
{
"text": "事件绑定",
"link": "/tutorial/events/binding-events"
},
{
"text": "取消事件传递",
"link": "/tutorial/events/cancel-propagation"
},
{
"text": "自定义命中区",
"link": "/tutorial/events/custom-hit-region"
},
{
"text": "桌面端与移动端",
"link": "/tutorial/events/desktop-and-mobile"
},
{
"text": "事件代理",
"link": "/tutorial/events/event-delegation"
},
{
"text": "触发事件",
"link": "/tutorial/events/fire-events"
},
{
"text": "图片事件",
"link": "/tutorial/events/image-events"
},
{
"text": "键盘事件",
"link": "/tutorial/events/keyboard-events"
},
{
"text": "事件监听",
"link": "/tutorial/events/listen-events"
},
{
"text": "移动端事件",
"link": "/tutorial/events/mobile-events"
},
{
"text": "移动端滚动",
"link": "/tutorial/events/mobile-scrolling"
},
{
"text": "多事件",
"link": "/tutorial/events/multi-event"
},
{
"text": "指针事件",
"link": "/tutorial/events/pointer-events"
},
{
"text": "移除事件",
"link": "/tutorial/events/remove-event"
},
{
"text": "按名称移除事件",
"link": "/tutorial/events/remove-by-name"
},
{
"text": "Stage 事件",
"link": "/tutorial/events/stage-events"
}
]
},
{
"text": "拖放",
"collapsed": true,
"items": [
{
"text": "拖放基础",
"link": "/tutorial/drag-drop/basic-drag-drop"
},
{
"text": "图片拖拽",
"link": "/tutorial/drag-drop/drag-image"
},
{
"text": "组拖拽",
"link": "/tutorial/drag-drop/drag-group"
},
{
"text": "线拖拽",
"link": "/tutorial/drag-drop/drag-line"
},
{
"text": "stage 拖拽",
"link": "/tutorial/drag-drop/drag-stage"
},
{
"text": "拖拽事件",
"link": "/tutorial/drag-drop/drag-events"
},
{
"text": "简单拖拽边界",
"link": "/tutorial/drag-drop/simple-drag-bounds"
},
{
"text": "复杂拖放",
"link": "/tutorial/drag-drop/complex-drag-drop"
},
{
"text": "放置事件",
"link": "/tutorial/drag-drop/drop-events"
}
]
},
{
"text": "选择与形变",
"collapsed": true,
"items": [
{
"text": "基本演示",
"link": "/tutorial/select-transform/basic-demo"
},
{
"text": "居中演示",
"link": "/tutorial/select-transform/centered-scaling"
},
{
"text": "保持比例",
"link": "/tutorial/select-transform/keep-ratio"
},
{
"text": "样式",
"link": "/tutorial/select-transform/styling"
},
{
"text": "复杂变换器样式",
"link": "/tutorial/select-transform/complex-transformer-styling"
},
{
"text": "变换事件",
"link": "/tutorial/select-transform/transform-events"
},
{
"text": "缩放限制",
"link": "/tutorial/select-transform/resize-limits"
},
{
"text": "调整吸附",
"link": "/tutorial/select-transform/resize-snaps"
},
{
"text": "旋转吸附",
"link": "/tutorial/select-transform/rotation-snaps"
},
{
"text": "停止变换",
"link": "/tutorial/select-transform/stop-transform"
},
{
"text": "强制更新",
"link": "/tutorial/select-transform/force-update"
},
{
"text": "调整文本",
"link": "/tutorial/select-transform/resize-text"
},
{
"text": "忽略描边",
"link": "/tutorial/select-transform/ignore-stroke"
}
]
},
{
"text": "裁剪",
"collapsed": true,
"items": [
{
"text": "裁剪函数",
"link": "/tutorial/clipping/clipping-functions"
},
{
"text": "简单裁剪",
"link": "/tutorial/clipping/simple-clipping"
}
]
},
{
"text": "分组与图层",
"collapsed": true,
"items": [
{
"text": "更改容器",
"link": "/tutorial/groups-layers/change-containers"
},
{
"text": "组",
"link": "/tutorial/groups-layers/groups"
},
{
"text": "分层",
"link": "/tutorial/groups-layers/layering"
},
{
"text": "zIndex",
"link": "/tutorial/groups-layers/zindex"
}
]
},
{
"text": "滤镜",
"collapsed": true,
"items": [
{
"text": "模糊",
"link": "/tutorial/filters/blur"
},
{
"text": "亮度",
"link": "/tutorial/filters/brightness"
},
{
"text": "对比度",
"link": "/tutorial/filters/contrast"
},
{
"text": "自定义滤镜",
"link": "/tutorial/filters/custom-filter"
},
{
"text": "自定义灰度化",
"link": "/tutorial/filters/custom-grayer"
},
{
"text": "浮雕",
"link": "/tutorial/filters/emboss"
},
{
"text": "增强",
"link": "/tutorial/filters/enhance"
},
{
"text": "灰度",
"link": "/tutorial/filters/grayscale"
},
{
"text": "HSL",
"link": "/tutorial/filters/hsl"
},
{
"text": "HSV",
"link": "/tutorial/filters/hsv"
},
{
"text": "反转",
"link": "/tutorial/filters/invert"
},
{
"text": "万花筒",
"link": "/tutorial/filters/kaleidoscope"
},
{
"text": "蒙版",
"link": "/tutorial/filters/mask"
},
{
"text": "多重滤镜",
"link": "/tutorial/filters/multiple-filters"
},
{
"text": "噪声",
"link": "/tutorial/filters/noise"
},
{
"text": "像素化",
"link": "/tutorial/filters/pixelate"
},
{
"text": "RGB",
"link": "/tutorial/filters/rgb"
},
{
"text": "怀旧",
"link": "/tutorial/filters/sepia"
},
{
"text": "太阳化",
"link": "/tutorial/filters/solarize"
},
{
"text": "阈值",
"link": "/tutorial/filters/threshold"
}
]
},
{
"text": "补间",
"collapsed": true,
"items": [
{
"text": "所有控制",
"link": "/tutorial/tweens/all-controls"
},
{
"text": "所有缓动",
"link": "/tutorial/tweens/all-easing"
},
{
"text": "一般缓动",
"link": "/tutorial/tweens/common-easings"
},
{
"text": "复杂补间",
"link": "/tutorial/tweens/complex-tweening"
},
{
"text": "完成事件",
"link": "/tutorial/tweens/finish-event"
},
{
"text": "线性缓动",
"link": "/tutorial/tweens/linear-easing"
},
{
"text": "滤镜补间",
"link": "/tutorial/tweens/filter-tweening"
}
]
},
{
"text": "动画",
"collapsed": true,
"items": [
{
"text": "创建动画",
"link": "/tutorial/animations/create-animation"
},
{
"text": "运动",
"link": "/tutorial/animations/moving"
},
{
"text": "旋转",
"link": "/tutorial/animations/rotation"
},
{
"text": "缩放",
"link": "/tutorial/animations/scaling"
},
{
"text": "停止动画",
"link": "/tutorial/animations/stop-animation"
},
{
"text": "文本动画",
"link": "/tutorial/animations/text-animations"
}
]
},
{
"text": "演示",
"collapsed": true,
"items": [
{
"text": "透明组",
"link": "/tutorial/sandbox/transparent-group"
}
]
},
{
"text": "性能",
"collapsed": true,
"items": [
{
"text": "性能优化技巧",
"link": "/tutorial/performance/all-performance-tips"
},
{
"text": "避免内存泄漏",
"link": "/tutorial/performance/avoid-memory-leaks"
},
{
"text": "批量绘制",
"link": "/tutorial/performance/batch-draw"
},
{
"text": "禁用完美绘制",
"link": "/tutorial/performance/disable-perfect-draw"
},
{
"text": "图层管理",
"link": "/tutorial/performance/layer-management"
},
{
"text": "关闭监听",
"link": "/tutorial/performance/listening-false"
},
{
"text": "动画优化",
"link": "/tutorial/performance/optimize-animation"
},
{
"text": "描边优化",
"link": "/tutorial/performance/optimize-strokes"
},
{
"text": "图形缓存",
"link": "/tutorial/performance/shape-caching"
}
]
}
]
}
],
"/api/": [
{
"text": "API",
"items": [
{
"text": "Konva",
"link": "/api/konva"
},
{
"text": "Animation 动画",
"link": "/api/animation"
},
{
"text": "Arrow 箭头",
"link": "/api/arrow"
},
{
"text": "Canvas 画布",
"link": "/api/canvas"
},
{
"text": "Arc 圆弧",
"link": "/api/arc"
},
{
"text": "Circle 圆",
"link": "/api/circle"
},
{
"text": "Container 容器",
"link": "/api/container"
},
{
"text": "Context 上下文",
"link": "/api/context"
},
{
"text": "Easings 缓动函数集",
"link": "/api/easings"
},
{
"text": "Ellipse 椭圆",
"link": "/api/ellipse"
},
{
"text": "FastLayer 快图层(废弃)",
"link": "/api/fast-layer"
},
{
"text": "Filters 滤镜集",
"link": "/api/filters"
},
{
"text": "Group 组",
"link": "/api/group"
},
{
"text": "Image 图片",
"link": "/api/image"
},
{
"text": "Label 标签",
"link": "/api/label"
},
{
"text": "Layer 图层",
"link": "/api/layer"
},
{
"text": "Line 线",
"link": "/api/line"
},
{
"text": "Node 节点",
"link": "/api/node"
},
{
"text": "Path 路径",
"link": "/api/path"
},
{
"text": "Rect 矩形",
"link": "/api/rect"
},
{
"text": "RegularPolygon 正多边形",
"link": "/api/regular-polygon"
},
{
"text": "Ring 环",
"link": "/api/ring"
},
{
"text": "Shape 图形",
"link": "/api/shape"
},
{
"text": "Sprite 精灵图",
"link": "/api/sprite"
},
{
"text": "Stage 舞台",
"link": "/api/stage"
},
{
"text": "Star 星形",
"link": "/api/star"
},
{
"text": "Tag 标签背景",
"link": "/api/tag"
},
{
"text": "Text 文本",
"link": "/api/text"
},
{
"text": "TextPath 文本路径",
"link": "/api/text-path"
},
{
"text": "Transform 变换",
"link": "/api/transform"
},
{
"text": "Transformer 变换器",
"link": "/api/transformer"
},
{
"text": "Tween 补间动画",
"link": "/api/tween"
},
{
"text": "Util 工具集",
"link": "/api/util"
},
{
"text": "Wedge 楔形",
"link": "/api/wedge"
}
]
}
],
"/demo/": [
{
"text": "演示",
"items": [
{
"text": "总览",
"link": "/demo/overview"
},
{
"text": "画布编辑器",
"link": "/demo/canvas-editor"
}
]
}
],
"/analysis/": [
{
"text": "源码分析",
"items": [
{
"text": "概览",
"link": "/analysis/overview"
},
{
"text": "类继承图",
"link": "/analysis/inheritance-diagram"
},
{
"text": "要点导图",
"link": "/analysis/key-point-mindmap"
},
{
"text": "坐标系",
"link": "/analysis/coordinate-system"
},
{
"text": "类型增强",
"collapsed": true,
"items": [
{
"text": "addGetterSetter 解析",
"link": "/analysis/type-enhance/add-getter-setter"
}
]
},
{
"text": "示例",
"link": "/analysis/demo"
}
]
}
]
},
"socialLinks": [
{
"icon": {
"svg": "<svg t=\"1763474036142\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"2685\" width=\"256\" height=\"256\"><path d=\"M512 42.666667A464.64 464.64 0 0 0 42.666667 502.186667 460.373333 460.373333 0 0 0 363.52 938.666667c23.466667 4.266667 32-9.813333 32-22.186667v-78.08c-130.56 27.733333-158.293333-61.44-158.293333-61.44a122.026667 122.026667 0 0 0-52.053334-67.413333c-42.666667-28.16 3.413333-27.733333 3.413334-27.733334a98.56 98.56 0 0 1 71.68 47.36 101.12 101.12 0 0 0 136.533333 37.973334 99.413333 99.413333 0 0 1 29.866667-61.44c-104.106667-11.52-213.333333-50.773333-213.333334-226.986667a177.066667 177.066667 0 0 1 47.36-124.16 161.28 161.28 0 0 1 4.693334-121.173333s39.68-12.373333 128 46.933333a455.68 455.68 0 0 1 234.666666 0c89.6-59.306667 128-46.933333 128-46.933333a161.28 161.28 0 0 1 4.693334 121.173333A177.066667 177.066667 0 0 1 810.666667 477.866667c0 176.64-110.08 215.466667-213.333334 226.986666a106.666667 106.666667 0 0 1 32 85.333334v125.866666c0 14.933333 8.533333 26.88 32 22.186667A460.8 460.8 0 0 0 981.333333 502.186667 464.64 464.64 0 0 0 512 42.666667\" p-id=\"2686\"></path></svg>"
},
"link": "https://github.com/foolishflyfox/konva-docs-zh"
}
]
}Page Data
{
"title": "源码分析",
"description": "",
"frontmatter": {
"outline": "deep"
},
"headers": [],
"relativePath": "analysis/overview.md",
"filePath": "analysis/overview.md"
}Page Frontmatter
{
"outline": "deep"
}More
Check out the documentation for the full list of runtime APIs.