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

相关推荐

wangeditor自定义菜单

时间是衡量事业的标准。 —— 培根代码如下： 123456789101112131415161718192021222324252627282930313233import { DomEditor, IButtonMenu, IDomEditor, ISelectMenu } from '@wangeditor/editor'export class MentionMenu implements IButtonMenu { constructor() { this.title = '设置标签' // this.iconSvg = '<svg >...</svg>' this.tag = 'button' } title: string iconSvg?: string | undefined hotkey?: string | undefined alwaysEnable?: boolean ...

人生遇到瓶颈时，上进心是最大的煎熬。——颜如晶我们可以使用Number()函数将字符串转换为数字

js获取url上的参数

获取url上的参数 123456789101112function getUrlParam(name) { if (name == null) { return name; } var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if (r != null) { //return unescape(r[2]); return r[2]; } return null; } 1console.log(getUrlParam("id"));

js禁止右键点击事件

勤劳一日，可得一夜安眠；勤劳一生，可得幸福长眠。——达·芬奇 js禁止右键点击事件触发代码 123456789101112131415161718192021222324function click() { return false;}function click1() { if (event.button == 2) { return false; }}function CtrlKeyDown() { if (event.ctrlKey) { return false; }}document.onkeydown = CtrlKeyDown;document.onselectstart = click;document.onmousedown = click1;document.oncontextmenu = function(event) { if (document.all) windo...

vuesax一些组件找不到踩坑

祸生于欲得，福生与自禁。——刘向今天发现vuesax有一些组件用不了了，弄了半天，没办法去github上看了看发现这个人也是相同问题 https://github.com/lusaxweb/vuesax-next/issues/208 然后翻issue看到一个不继续开发的issue https://github.com/lusaxweb/vuesax-next/issues/297 这里提到 A fork of Vuesax V4 has been created that works with Vue 3 and Nuxt 3. Additionally, the fork includes new components that are not present in V4. I suggest using and contributing to fork instead. Vuesax V4 的一个分支已经创建，可与 Vue 3 和 Nuxt 3 配合使用。此外，该分支还包含 V4 中不存在的新组件。我建议改为使用 fork 并为其做出贡献。这里跳转过来是一个v...

node版本管理工具nvm

凡心所向，素履所往，生如逆旅，一苇以航。——『尘曲』我们经常需要多个node版本切换的场景，nvm可以做到这一切代码地址：https://github.com/nvm-sh/nvm 我们这里用的是windows，因此windows仓库地址：https://github.com/coreybutler/nvm-windows 首先是下载：https://github.com/coreybutler/nvm-windows/releases/tag/1.1.7 下载zip包后安装即可注意这里是1.1.7版本，而且安装目录尽量放在D盘新建的目录等没有空格、中文、乱七八糟的权限干扰的目录然后选择node路径时同理完成后即可使用 123456789101112$ nvm use 16Now using node v16.9.1 (npm v7.21.1)$ node -vv16.9.1$ nvm use 14Now using node v14.18.0 (npm v6.14.15)$ node -vv14.18.0$ nvm install 12Now using nod...

阿超

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

数据加载中