konva实现双击编辑富文本

发表于2022-06-29|更新于2026-02-24

|浏览量:

那一天我二十一岁，在我一生的黄金时代，我有好多奢望。我想爱，我想吃，我想在一瞬间变成天上半明半暗的云。——《黄金时代》

完整代码放到了：https://gitee.com/VampireAchao/simple-konva-html

主要是这个文件

https://gitee.com/VampireAchao/simple-konva-html/blob/master/richtext-dragable.html

思路来源：https://konvajs.org/docs/sandbox/Rich_Text.html

主要思路：

1.双击时创建(我这里是隐藏显示再定位)富文本dom节点

2.通过htmlToCanvas转换html为canvas

3.使用Konva.Image渲染

效果还是蛮不错的，能做polotno的类似案例

相关推荐

人之所以走入迷途，并不是由于他的无知，而是由于他自以为知。——卢梭《爱弥儿》前两天用nvue踩了不少坑，例如之前写的nvue引入图标坑就是一个例如manifest.json中这里需要配置为weex才能使用weex渲染 uniapp-nvue文档 weex文档要注意这里基本上是nvue的一些常见的坑还有其他的一些，例如一些不支持的css写法如transition 如果写成transition: 1s;则会提示当然transition: all 1s;也不行只能针对对应的过渡去写： 12transition-property: width;transition-duration: 1s; 缩写就是： 1transition: width 1s linear 2s; 一般像不支持的全局属性，需要写在条件编译里 12345678910.logo { height: 0; width: 0; /* #ifndef APP-PLUS-NVUE */ transition: all 1s; /* #endif */ /* #ifdef APP-PLUS...

人们宁愿去关心一个蹩脚电影演员的吃喝拉撒和鸡毛蒜皮，而不愿了解一个普通人波涛汹涌的内心世界。——路遥《平凡的世界》 X6 ：让你的流程图、DAG、ER图开发像搭积木一样高效有趣！如果你是一名开发者、产品经理，或者数据分析师，是否曾为“如何快速搭建一个好用、美观、可定制的流程图/DAG/ER图编辑器”而头疼？AntV X6，就是为了解决你的痛点而生的专业图编辑引擎！ X6是什么？X6 是 AntV 旗下的图编辑引擎，专为流程图、DAG 图、ER 图等各类图应用打造。它提供了简单易用的节点定制能力和丰富的交互组件，让你像搭积木一样快速实现强大、个性化的图应用，无论你是用 SVG、HTML、React、Vue 还是 Angular，都能轻松上手定制。官网直达：https://x6.antv.antgroup.com 四大核心特性，让图编辑开发变得“丝滑”！🌱 极易定制支持 SVG/HTML/React/Vue/Angular 各种主流技术栈，无论你喜欢哪种方式，都能打造出炫酷的节点样式和交互效果。节点、边都能灵活...

为爱情赌气，就丧心病狂了！——塞万提斯分享一个好玩的css属性： mix-blend-mode，MDN 该属性可以将元素和后面的背景进行混合什么叫混合呢？例如我看到的一个网站：红框框出来的部分，是鼠标移动上去的一个效果这个小圈，与后面的图片进行了反色，而且对于不少图片都有类似效果，我一开始以为是用了两张图片做的处理后来发现并不是，是用的这个css 1mix-blend-mode: exclusion; 其提供的不只是反色一个选项，还有很多的值，都可以使用

js页面历史返回

历史是一堆灰烬，但灰烬深处有余温。——黑格尔我们可以使用history.back()来进行页面返回 history的文档： History API - Web API | MDN 除了返回还可以前进 1history.forward(); 以及 12// 向后跳转一个页面（等价于调用 back()）history.go(-1); 然后还有 12// 向前跳转一个页面，就像调用 forward()history.go(1); 当然传入0就是刷新 123// 以下语句都具有刷新页面的效果history.go(0);history.go(); 还有查看页面栈长度 1const numberOfEntries = history.length; 补充： 12345678910window.addEventListener("popstate", (event) => { alert(`位置：${document.location}，状态：${JSON.stringify(event.state)}...

for of和for in

人生而自由，却无往不在枷锁中——卢梭《社会契约论》我之前写过一篇for in的博客 for in是遍历对象key或者数组下标前端还可以使用for of来遍历value 简单写一下两者区别和使用方式吧： 12let ruben = {name:'ruben', age:21}for(key in ruben) console.log(key) 然后是for of 提示对象并不是iterable(可迭代的) 因此for of并不能遍历对象的key 接下来看数组的： 12let list = [1,2,3,4,5,6]for(i in list) console.log(i) 可以看到是遍历获取出了下标并不是实际的值而for of： 12let list = [1,2,3,4,5,6]for(i of list) console.log(i) 遍历出了我们的value

懂得生命真谛的人，可以使短促的生命延长。——西塞罗代码如下： 1"token".split(".").slice(0,2).map(i=>JSON.parse(atob(i))) 当我在解析 jwt 的 token 时，发现 token 中附带的用户 id 存在精度丢失问题，然后用正则改进解析 JWT 的代码： 1const tokenParse = token => token.split(".").slice(0, 2).map(i => JSON.parse(atob(i).replace(/:\s*([-+]?\d+(\.\d+)?([eE][-+]?\d+)?)/g, (match, p1) => Math.abs(p1) > Number.MAX_SAFE_INTEGER ? `:"${p1}"` : `:${p1}`))); 但是还存在 base64 解码时无法正确解码中文问题，继续改进 1const tok...

阿超

我的名字叫阿超年龄25岁家在北京市职业是软件开发每天最晚也会在八点前回家不抽烟酒浅尝辄止晚上十二点上床保证睡足八个小时睡前写一篇博客再做二十分钟俯卧撑暖身然后再睡觉基本能熟睡到天亮像婴儿一样不留下任何疲劳和压力就这样迎来第二天的早晨健康检查结果也显示我很正常我想说明我是一个不论何时都追求内心平稳的人不拘泥于胜负不纠结于烦恼不树立使我夜不能寐的敌人这就是我在这社会的生活态度

数据加载中