- 综合排序
- 最热优先
- 最新优先
- 来自专栏快乐阿超
konva-react
https://konvajs.org/docs/react/ 中文文档：http://konvajs-doc.bluehymn.com/docs/react/ 安装： pnpm install react-konva konva --save 在konva中能做到的，在konva-react也一样能做到，只不过是换了一种写法罢了 这里有个使用konva-react的在线编辑器Demo https://konvajs.org /docs/sandbox/Canvas_Editor.html 是基于一个叫Polotno的框架，它提供了多种react对konva的封装，能开箱即用 https://polotno.dev/ 但其不可以免费用于商业用途
74610编辑于 2022-08-21 - 来自专栏前端西瓜哥的前端文章
konva系列教程5：事件
大家好，我是前端西瓜哥，我们今天来看看 Konva 的事件系统 。 Konva 的图形同时支持 PC 端和移动端事件， 包括 DOM 元素类似的事件，如 Mouse、Touch、Pointer 事件。 Konva 支持给一个图形设置为可拖拽，然后可以通过鼠标移动，该行为对应的时间就是这些； transformstart / transform / transformend：Konva 也支持给一个图形添加形变特性 很多类都有这个方法，是继承自 Konva.Node 类的。 事件流 Konva 支持事件冒泡，但不支持事件捕获。 子节点的事件会冒泡到父节点。 我们在 stage 节点下，加入 rect 图形，然后对它们设置事件监听。
1.6K20编辑于 2022-12-21 - 来自专栏快乐阿超
konva实现双击编辑富文本
完整代码放到了：https://gitee.com/VampireAchao/simple-konva-html 主要是这个文件 https://gitee.com/VampireAchao/simple-konva-html konvajs.org/docs/sandbox/Rich_Text.html 主要思路： 1.双击时创建(我这里是隐藏显示再定位)富文本dom节点 2.通过htmlToCanvas转换html为canvas 3.使用Konva.Image
2.1K10编辑于 2022-08-21 - 来自专栏前端知识分享
第166天：canvas绘制饼状图动画
12 overflow: hidden; 13 } 14 </style> 15 <script src="bower_components/<em>konva</em> /<em>konva</em>.min.js"></script> 16 <script src="js/PieChart.js"></script> 17 </head> 18 <body> 19
2021 22 <script> 23 //创建舞台 24 var stage = new Konva.Stage height: window.innerHeight 28 }); 29 30 //创建层 31 var layer = new Konva.Layer this.data = option.data || []; 12 13 //饼状图所有的 物件的组 14 this.group = new Konva.Group1.8K00发布于 2018-09-11 - 来自专栏前端知识分享
第167天：canvas绘制柱状图
12 overflow: hidden; 13 } 14 </style> 15 <script src="bower_components/<em>konva</em> /<em>konva</em>.min.js"></script> 16 <script src="js/HistogramChart.js"></script> 17 18 </head> 19 <body
2122 23 <script> 24 //创建舞台 25 var stage = new Konva.Stage height: window.innerHeight 29 }); 30 31 //创建层 32 var layer = new Konva.Layer 23 y: this.y 24 }); 25 26 //放矩形的组 27 this.rectGroup = new Konva.Group1.6K30发布于 2018-09-11 - 来自专栏vanguard
two.js konvas.js helloworld
group.rotation += t * 4 * Math.PI; }).play(); // Finally, start the animation loop </script> Konva konva.min.zip <! -- <script src="js/<em>konva</em>.min.js" type="text/javascript" charset="utf-8"></script> --> <script src="https ://unpkg.com/<em>konva</em>@3.1.0/<em>konva</em>.js"></script>
<script> var stage = new shape var box = new Konva.Rect({ x: 50, y: 50, width: 100, height12.4K40发布于 2020-03-10 - 来自专栏老马寒门IT
Canvas入门到高级详解(下)
五、Konva 的使用快速上手 5.1 Konva 的整体理念 舞台的概念的引入。 //线性 Konva.Easings.EaseIn //缓动，先慢后快 Konva.Easings.EaseOut //先快后慢 Konva.Easings.EaseInOut //两头慢，中间快 Konva.Easings.BackEaseIn Konva.Easings.BackEaseOut Konva.Easings.BackEaseInOut Konva.Easings.ElasticEaseIn //橡皮筋 英 [ɪ'læstɪk] 美 [ɪ'læstɪk] Konva.Easings.ElasticEaseOut Konva.Easings.ElasticEaseInOut Konva.Easings.BounceEaseIn / //强力 Konva.Easings.StrongEaseOut Konva.Easings.StrongEaseInOut 动画效果参考： 29Konva 动画缓动效果案例.html 5.3.2
3.8K23发布于 2019-05-25 - 来自专栏携程技术
干货 | React 中的 Canvas 动画
Konva 对 Canvas 进行了简单的封装，将绘制内容通过对象进行管理，每次绘制前会自动进行清除操作。 3.4 react-konva Konva 有提供 React 版本——react-konva，因此我们把上面的代码改写下。 '; import Konva from 'konva'; const Picture = () => { // 这里只是为了表明这里 div 和 konva 的 Rect 能同时被绘制，因此加了一层 3.5 react-konva 源码解读 react-konva 的确封装了一点内容，它实现一个自定义的 Render 来对 JSX 中的这些节点进行解析，最后将节点渲染至 Canvas 中。 react-konva 利用这套机制，将 React Element 对象转化为了 Konva 中的对象，进行内容的绘制。
3.9K51编辑于 2021-12-13 - 来自专栏前端知识分享
第162天：canvas中Konva库的使用方法
五、Konva的使用快速上手 5.1 Konva的整体理念 Stage | +------+------+ 矩形案例 5.2.1 创建一个矩形： Konva.Rect(option); 1 //Konva使用的基本案例 2 //第一步：创建舞台 3 var stage = new Konva.Stage 1 var group = new Konva.Group({ 2 x: 0, 3 y: 0 4 }); 5 group.add(rect); 5.4 Konva ; 29 evt.cancelBubble = true; //取消事件冒泡 30 }); 5.5 Konva的选择器 选择方法。 ('Circle');//查找所有的圆形Konva对象 1 //组中查找圆形的Konva对象 2 groupCircle.find('Circle').each(function( circle
3.1K11发布于 2018-09-11 - 来自专栏【腾讯云开发者】
10分钟带你了解Konva运行原理
本文总结梳理了Konva的架构设计、原理及其缺点，希望可以为大家了解KonvaJS的相关问题提供一些参考。 }); const layer = new Konva.Layer(); const group = new Konva.Group(); const text Shape：指Text、Rect、Circle等图形，这些是Konva封装好的类。 相比ZRender里面比较复杂的计算，Konva使用了一个相当巧妙的方式。 （二）react-konva react-konva的主要实现就在ReactKonvaHostConfig.js里面，它利用Konva原本的API实现了对Virtual DOM的映射，响应了Virtual
6.3K21发布于 2021-10-13 - 来自专栏前端知识分享
第165天：canvas绘制圆环旋转动画
canvas绘制圆环旋转动画——面向对象版 1、HTML 注意引入Konva.js库 1 <! DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>使用Konva绘制圆环旋转动画 </title> 6 <script src="<em>konva</em>/<em>konva</em>.min.js"></script> 7 <script src="CircleText.js"></script body> 10
11 1213 14 <script> 15 //创建舞台 16 var stage=new Konva.Stage (); 78 stage.add(animateLayer); 79 80 //创建2环的组 81 var Group2=new Konva.Group({ 822.8K41发布于 2018-09-11 - 来自专栏前端小馆
浅谈 Canvas 渲染引擎
} from 'react-dom'; import { Stage, Layer, Rect, Text } from 'react-konva'; import Konva from 'konva 即使是 Konva 也是依赖于 x、y 来做相对定位。 3.1 取色值法 取色值法是 Konva 采用的实现方式，它的实现方式非常简单，匹配精确度很高，适合不规则图形的匹配。 4.1 异步批量渲染 在飞书文档 Bitable 和 Konva 里面都支持异步渲染，将大量绘制进行批量处理。 这里主要讲解 Konva 和飞书 Bitable 里面的离屏渲染。 在 Konva 中的离屏渲染主要是针对 Group 级别来做的，通过调用 cache 方法就能实现离屏渲染。
3.6K20编辑于 2023-03-16 - 来自专栏前端小馆
LeaferJS，全新的 Canvas 渲染引擎
wireframeLayer.add(border) 从 Demo 可以看到 App 作为一个应用的实例，能往里面添加 Leafer 实例，每个 Leafer 内部会创建一个 Canvas 节点，这个和 Konva 在 Fabric 里面也有这种的优化，Konva 里面反而没有，所以在 leaferjs 给的对比里面，Konva 渲染速度是最低的。 在 Konva 里面采用了色值法的方式来实现，但色值法开销很大，尤其是绘制带来了两倍开销。 在 leaferjs 里面针对 Konva 的事件拾取做了一定优化。 相比 Konva 在首屏就绘制了两遍，leaferjs 会在事件触发的时候，针对当前遍历的节点进行 hitCanvas 的绘制，所以首屏渲染性能比 Konva 要好很多。 但由于不需要去存 colorKey 这些数据，内存占用相比 Konva 还是会少了很多。 5.
1.5K10编辑于 2023-10-16 - 来自专栏有意思的前端世界
使用konvajs三步实现一个小球游戏
使用konvajs基本上也分为三步，第一步是创建一个"舞台"： import { Stage } from 'konva' const stage = new Stage({ container container',// 容器元素的id width: 500, height: 500 }) 第二步是创建一个“图层”，添加到“舞台”里： import { Layer } from 'konva 直接复制官方文档上的圆和矩形的示例代码，小球： import { Circle } from 'konva' createCircle () { // 小球的中心坐标 this.centerX this.layer.add(this.circle) this.layer.draw()// 重新绘制，每次修改后都需要调用该方法 } 挡板： import { Rect } from 'konva
98620编辑于 2022-06-15 - 来自专栏前端实验室
强烈推荐！汇总了几个前端离不开的2D图形库
家好，我是「前端实验室」爱分享的了不起~ 在现代前端开发中，无论是构建游戏、数据可视化还是动画效果，合适的2D图形库可以增加用户的趣味性，接下来就给大家介绍几个常用的2D图形库 konva.js Konva.js 它提供了一个强大的API，使得开发者可以轻松地在Canvas上添加图形、文本、形状、图像、动画等元素，并且可以与这些元素进行交互 https://github.com/konvajs/konva fabric.js
3.1K20编辑于 2023-08-10 - 来自专栏phodal
如何构建一个在线绘图工具：Feakin 是如何设计与构建的？
于是乎，需要寻找一个合理的绘制引擎，诸如于 Raphaël、Fabric、Konva 等。最后，选择了 Konva，因为它支持了 React 框架。 使用 React Konva 进行渲染。将图形模型匹配到 Konva 中的图形，如 RectangleShap 对应于 <Rect> 组件、Edge 对应于 <Line>、 <Arrow>等。 我们需要将上述的信息，再次转换到 Konva 的模型中。而其中会存在一些差距，比如 Konva 使用 Polygon（多边型）来表示Triangle（三角型）、Diamond（菱形）等。
2.1K30编辑于 2022-08-29 - 来自专栏【腾讯云开发者】
10w单元格滚动卡顿如何解决？腾讯文档的7个秘笈
第三阶段，基于 widget 进行绘制，从根 layoutTree 开始递归子节点执行 painter 方法； 第四阶段，Konva 执行 Layer 的 batchDraw 方法，递归执行子节点的 draw Konva 为了能够根据坐标点匹配到触发的元素，采用了色值法——也就是在内存里面的 hitCanvas 里面绘制一模一样的图形，给这个图形加一个随机填充色，生成一个 colorKey。 我们来翻翻 Konva 的源码。 滚动的时候，触发的是 wheel 事件。只需要在滚动的时候设置 layer 的 isListening 为 false 即可。 7.1 多卡片 vs 整屏 Smart Sheet 相比 Sheet 和 Word 来说会特殊一些，腾讯文档团队使用了 Konva 这个框架，它自身封装了一套渲染逻辑，所以对于 Word 这种离屏渲染来说 文本换行和截断，在 Konva 里面进行了非常复杂的计算。主要是对文本进行二分查找，依次找到最终需要截断的字符位置。如果有换行符，需要对换行符进行特殊处理。
6.3K51编辑于 2023-02-23 - 来自专栏程序员成长指北
【实战篇】使用fabric.js 快速开发一个图片编辑器
nihaojob.github.io/vue-fabric-editor/ GitHub地址：https://github.com/nihaojob/vue-fabric-editor 架构设计 选型： fabric.js 和 konva.js 都是强大的canvas库，功能上类似，konva.js比较新中文文档也多一些，因为比较熟悉fabric就没有采用konva。
4.6K20编辑于 2022-11-28 - 来自专栏linux运维
借助 CodeBuddy 突破技术瓶颈的创作故事：从 0 到 1 构建全球低延迟实时协作白板
Git推送；触发LighthouseCI/CD；返回报告：Performance97/Accessibility100；指出问题：⚠️避免大DOM：你的<svg>包含15,000+<path>→建议：使用Konva.js +视口虚拟化我立即引入Konva+offscreencanvas，帧率从22fps飙升至60fps。
25110编辑于 2025-11-16 - 来自专栏快乐阿超
react在ts中提示ref问题
RefObject是Ref中容许的其中一种类型 所以应该使用上面一种重载 在原有代码React.useRef()中传入null 报错解决 同理，trRef一样 注意此处Ref<TextRef>内的泛型使用的是konva
2.4K20编辑于 2022-08-21
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号