什么是Konva?

Konva是一个基于 Canvas 开发的 2d JavaScript框架库, 它可以轻松的实现桌面应用和移动应用中的图形交互交互效果.

Konva 可以实现高性能动画, 过渡, 节点嵌套, 局部操作, 滤镜, 缓存, 事件等功能, 不仅仅适用于桌面与移动开发, 还有更为广泛的应用.

Konva 允许在你舞台上绘图, 添加事件监听, 移动或缩放某个图形, 独立旋转, 以及高效的动画. 即使应用中含有数千个图形也是可以轻松实现的.

Install Konva

什么是Konva? What’s Konva?

Konva是一个基于 Canvas 开发的 2d JavaScript框架库, 它可以轻松的实现桌面应用和移动应用中的图形交互交互效果.

Konva 可以实现高性能动画, 过渡, 节点嵌套, 局部操作, 滤镜, 缓存, 事件等功能, 不仅仅适用于桌面与移动开发, 还有更为广泛的应用.

它是如何工作 How does it work?

一切都是从一个包含了一系列用户的图层 Konva.Layer 的舞台对象 Konva.Stage 开始的

每个图层都有两个渲染器：一个场景渲染器以及一个 hit graph 渲染器(隐藏渲染器)。场景渲染器是你所看到的东西, hit graph 渲染器则是一个特殊的隐藏画布，它被用来实现高性能的点击检测机制。

基本形状 Basic shapes

样式 Styles

Fill. Solid color, gradients or images *填充：纯色，渐变或者图像纹理
Stroke (color, width) *描边：颜色，宽度
Shadow (color, offset, opacity, blur) *阴影：颜色，偏移，透明度，模糊度
Opacity *透明度

事件 Events

使用 Konvajs ，你可以方便地监听用户输入事件（点击，双击，鼠标滑过，触击，连续触击，触摸开始等），属性变更事件（横向缩放变更，填充变更等），和拖拽释放事件（拖拽开始，拖拽移动，托转结束）。

拖拽和释放 DRAG AND DROP

Konvajs 没有内建的拖拽支持，现在并没有任何拖拽事件（drop,dragenter,dragleave,dragover) 但是,利用框架，可以轻易地实现这个机制。

滤镜 Filters

动画Animation

使用 Konva.Animation 的示例:

使用 Konva.Tween 的示例:

选择器 Selectors

Konvajs 提供的选择器可以帮你寻找元素。你可以使用 find() 函数（返回一个集合）或者 findOne() 函数(返回集合中的第一个元素)

序列化和反序列化 Serialisation and Deserialization

性能 Performance

什么是Konva?
Konva 自定义动画
Konva 自定义移动动画
Konva 自定义旋转动画
Konva 自定义缩放动画
Konva 停止自定义动画
从 JSON 字符串加载复杂舞台
将舞台保存为 JSON 字符串
从 JSON 字符串加载简单舞台
获取舞台的 Data URL
Konva 性能优化指南
防止内存泄漏
使用 Batch Draw 处理重绘
禁用 Perfect Drawing
图层管理优化
禁用 Listening Shapes
动画优化
描边绘制优化
形状缓存
形状重绘
通过 name 属性选择形状
通过类型选择形状
通过 id 属性选择形状
tween 动画的所有操作
Konva 缓动函数集
常用的简单缓动函数
高级 tween 动画
Tween 动画的回调函数
Tween 动画
Tween 滤镜动画
Konva 自定义动画
Konva 自定义移动动画
Konva 自定义旋转动画
Konva 自定义缩放动画
Konva 停止自定义动画
HTML5 Canvas简单裁剪教程
HTML5 Canvas 裁剪教程
从 JSON 字符串加载复杂舞台
将舞台保存为 JSON 字符串
从 JSON 字符串加载简单舞台
获取舞台的 Data URL
HTML5 Canvas 复杂的拖放界限
HTML5 Canvas 拖放事件
HTML5 Canvas 拖放组
HTML5 Canvas 拖放线
HTML5 Canvas 拖放舞台
HTML5 Canvas 拖放图片
HTML5 Canvas 拖放教程
HTML5 Canvas drop(放下)事件。
HTML5 Canvas 简单的拖动界限教程
HTML5 Canvas 图形事件
HTML5 Canvas Konva 阻止冒泡
HTML5 Canvas 自定义命中检测
HTML5 Canvas PC端和移动端事件支持教程
HTML5 Canvas Konva 事件委托
HTML5 Canvas Konva 触发事件
HTML5 Canvas 图片事件
HTML5 Canvas 设置监听事件
HTML5 Canvas 手机触摸事件教程
HTML5 Canvas 手机滚动和本地事件
HTML5 Canvas 多个事件绑定教程
HTML5 Canvas 删除事件监听
HTML5 Canvas 通过名称删除事件监听
HTML5 Canvas 舞台事件
HTML5 Canvas 模糊图形滤镜
HTML5 Canvas 图片亮度滤镜
HTML5 Canvas 图片灰度滤镜
HTML5 Canvas 图片反色滤镜
HTML5 Canvas 万花筒
HTML5 Canvas 多个滤镜
HTML5 Canvas RGBA 图片滤镜
HTML5 Canvas 更改容器教程
HTML5 Canvas 图形组
HTML5 Canvas 图形层
How It Works
什么是Konva?
Overview
Konva 性能优化指南
title: 防止内存泄漏
title: 使用 Batch Draw 处理重绘
title: 禁用 Perfect Drawing
title: 图层管理优化
title: 禁用 Listening Shapes
title: 动画优化
title: 描边绘制优化
title: 形状缓存
title: 形状重绘
title: 10,000 Shapes with Tooltips Stress Test with Konva
title: Interactive Scatter Plot with 20,000 Nodes
title: Animals on the Beach Game
title: Animation Stress Test
title: Drag and Drop Multiple Shapes
title: Drag and Drop Stress Test with 10,000 Shapes
title: Elastic Stars
title: Expand Image on Hover
title: Free Drawing Konva Demo
title: Drag and Drop Multiple Images with Border Highlighting
title: HTML5 Canvas Drag, Drop, and Resize Images Demo
title: Interactive Building Map
title: Modify Curves with Anchor Points
title: Modify Shape Color on Click
title: Multi-touch Scale Shape
title: Multi-touch Scale Stage
title: Physics Simulator with Curve Detection
title: Planets Image Map
title: Oscillating Blobs
Do you need responsive/adaptive canvas for you desktop and mobile applications?
title: Shape Tango
title: Shape Tooltips
title: Star Spinner
title: Wheel of Fortune HTML5 Canvas Game
title: Zoom Image on Hover
title: Zooming stage relative to pointer position
title: Konva 自定义动画
title: Konva 自定义移动动画
title: Konva 自定义旋转动画
title: Konva 自定义缩放动画
title: Konva 停止自定义动画
title: 从 JSON 字符串加载复杂舞台
title: 将舞台保存为 JSON 字符串
title: 从 JSON 字符串加载简单舞台
title: 获取舞台的 Data URL
title: 演示
title: Konva 性能优化指南
title: 防止内存泄漏
title: 使用 Batch Draw 处理重绘
title: 禁用 Perfect Drawing
title: 图层管理优化
title: 禁用 Listening Shapes
title: 动画优化
title: 描边绘制优化
title: 形状缓存
title: 形状重绘
title: 通过 name 属性选择形状
title: 通过类型选择形状
title: 通过 id 属性选择形状
title: tween 动画的所有操作
title: Konva 缓动函数集
title: 常用的简单缓动函数
title: 高级 tween 动画
title: Tween 动画的回调函数
title: Tween 动画
title: Tween 滤镜动画
title: 通过 name 属性选择形状
title: 通过类型选择形状
title: 通过 id 属性选择形状
title: HTML5 canvas 添加弧形
title: HTML5 canvas Arrow Tutorial
title: HTML5 canvas 绘制圆形教程
title: HTML5 canvas 创建自定义形状
title: HTML5 canvas 绘制椭圆教程
title: HTML5 canvas 渲染图片教程
title: HTML5 canvas Label Tutorial
title: HTML5 canvas 创建不规则图形
title: HTML5 canvas 绘制多边形教程
title: HTML5 canvas 绘制线条教程
title: HTML5 canvas 创建一个曲线(样条)
title: HTML5 canvas 添加SVG路径,
title: HTML5 canvas 绘制矩形教程
title: HTML5 canvas Regular Polygon Tutorial
title: HTML5 canvas 环形教程
title: HTML5 canvas 精灵图动画教程
title: HTML5 canvas 添加星形教程
title: HTML5 canvas 添加文本教程
title: HTML5 canvas 添加文本路径
title: HTML5 canvas Wedge Tutorial
title: HTML5 Canvas 填充图形
title: HTML5 Canvas 隐藏和显示图形
title: HTML5 Canvas 线连接点样式
title: HTML5 Canvas 设置图形的不透明度
title: HTML5 Canvas 绘制阴影
title: HTML5 Canvas 设置绘制形状和笔画宽度
title: Help
title: Konva.js Tools and Plugins
title: tween 动画的所有操作
title: Konva 缓动函数集
title: 常用的简单缓动函数
title: 高级 tween 动画
title: Tween 动画的回调函数
title: Tween 动画
title: Tween 滤镜动画
空标题文档
空标题文档
空标题文档
空标题文档
空标题文档
空标题文档
空标题文档
空标题文档
空标题文档
空标题文档
空标题文档
空标题文档
空标题文档
空标题文档
空标题文档
空标题文档
空标题文档
空标题文档
空标题文档
空标题文档
空标题文档
空标题文档

📎📎📎📎📎📎📎📎📎📎