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的类似案例

相关推荐

懒惰象生锈一样，比操劳更能消耗身体；经常用的钥匙，总是亮闪闪的。——富兰克林分享一个CSS框架，内置了很多css样式： https://www.tailwindcss.cn/ 使用方式： https://www.tailwindcss.cn/docs/installation 注意其不支持IE浏览器仓库地址：https://github.com/tailwindlabs/tailwindcss 甚至你可以直接在Playground中进行尝试： https://play.tailwindcss.com/

一个人能在鼠疫和生活的赌博中所赢得的全部东西，就是知识和记忆。——《鼠疫》我们除了使用indexOf判断字符串/数组是否包含某字符/元素还可以使用includes 区别在于数组判断中indexOf对NaN值处理会错误，而includes不会，例如：这里显示-1说明没有匹配到而使用includes：可以看到成功匹配字符串也可以使用includes 非常的方便我们可以用prototype获取原型对象然后再调用 1Array.prototype.includes.call([1,2,3,4],1) 还是蛮方便的

知古不知今，谓之落沉。知今不知古，谓之盲瞽。——王充分享一个由 Vite 提供支持的 WebExtension（Chrome、FireFox 等浏览器插件）的入门模板。 Github： https://github.com/antfu-collective/vitesse-webext 特性： ⚡️ Instant HMR - 在 dev 上使用 Vite（不再刷新！ 🥝 Vue 3 - 组合式 API、<script 设置> 语法等等！ 💬 轻松通信 - 由 webext-bridge 和 Vue使用存储提供支持 🌈 UnoCSS - 即时按需原子 CSS 引擎。 🦾 TypeScript - 类型安全 📦 组件自动导入 🌟 图标 - 直接从任何图标集中访问图标 🖥 内容脚本 - 即使在内容脚本中也可以使用 Vue 🌍 WebExtension - Chrome、Firefox 等的同构扩展 📃 具有完整类型支持的动态manifest.json 使用模板GitHub 模板Create a repo from this template o...

uniapp中textarea坑

幼稚是会成长，会成熟的。只要不衰老，腐败，就好。——鲁迅今天在使用uniapp进行开发的时候，发现一个关于textarea标签的坑代码如下： 12345<template> <view style="width:100%;height: 100%;"> <textarea style="width:100%;height: 100%;" value="　　一般来讲，我们都必须务必慎重的考虑考虑。带着这些问题，我们来审视一下阿超。总结的来说，每个人都不得不面对这些问题。在面对这种问题时，阿超因何而发生？带着这些问题，我们来审视一下阿超。所谓阿超，关键是阿超需要如何写。从这个角度来看，德谟克利特说过一句富有哲理的话，节制使快乐增加并使享受加强。我希望诸位也能好好地体会这句话。那么，培根曾经提到过，阅读使人充实，会谈使人敏捷，写作使人精确。这不禁令我深思。问题的关键究竟为何。康德在不经意间这样说过，既然我已经踏上这条道路，那么，任何东西都不应妨碍我沿着这条路走下去。这启发...

我说你是人间的四月天，笑响点亮了四面风，轻灵在春的光艳中交舞着变。你是四月天里的云烟，黄昏吹着风的软，星子在无意中闪，细雨点撤在花前。——林徽因《你是那人间的四月天》打造极致终端体验！OpenTUI：TypeScript 终端界面开发新利器在互联网日益图形化的今天，Terminal（终端）依旧在开发者和极客圈中有着不可替代的重要地位：高效、纯粹、可脚本化、轻量且跨平台。如果你曾被命令行的“单调”困扰，或希望为CLI工具甚至运维平台打造更现代、交互丰富的终端界面（TUI），那么你一定不能错过——OpenTUI！一、什么是OpenTUI？项目地址：sst/opentui 官网主页：https://opentui.com 一句话简介：OpenTUI 是一个用于构建终端用户界面（TUI, Terminal User Interface）的 TypeScript 库。主要语言：TypeScript Star：4,529+ Fork：164+ 授权协议：MIT 无论你要开发终端应用仪表盘、交互式安装器、数据小工具，还是命令行游戏，这个库提供了现代化、丰富的能力，让你...

深入理解 JavaScript 异步

美丽的姿态胜过美丽的脸孔，美丽的行为胜过美丽的姿态。——爱默生学习js异步可以看这个 https://github.com/wangfupeng1988/js-async-tutorial 2014年秋季写完了《深入理解javascript原型和闭包系列》，已经帮助过很多人走出了 js 原型、作用域、闭包的困惑，至今仍能经常受到好评的留言。很早之前我就总结了JS三座大山这个概念（虽然没有到处宣扬），前两座（原型、作用域）已经基本讲明白，而第三座（异步）也应该做一个总结。于是，2017年初春，我花费大约一周的业余时间来对 JS 异步做一个完整的总结，和各位同学共勉共进步！目录part1 基础部分什么是异步异步和 event-loop 事件绑定算不算异步？ part2 jQuery的解决方案 jQuery-1.5 之后的 ajax jQuery deferred jQuery promise part3 ES6-Promise Promise 加入 ES6 标准 Promise 在 ES6 中的具体应用对标一下 Promise/A+ 规范 Pro...

阿超

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

数据加载中