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

相关推荐

console importer

当你没有空休息的时候，就是你该休息的时候——西德尼分享一个chrome插件Console Importer，可以方便我们在浏览器中进行调试一些没有本地安装的js库 GitHub - pd4d10/console-importer: Easily import JS and CSS resources from Chrome console. 从 Chrome 网上应用店安装它： Console Importer - Chrome 应用商店安装完重进使用： Usage 用法Open Chrome devtools console, a function named $i could be used to import JavaScript and CSS resources.打开Chrome devtools控制台，一个名为的 $i 函数可用于导入JavaScript和CSS资源。 1$i('jquery') Import specific version:导入特定版本： 1$i('jquery@2') Also,...

在今天和明天之间，有一段很长的时间；趁你还有精神的时候，学习迅速办事。——歌德来一篇“有点松弛又真有料”的前端模板解读：vue-pure-admin —— 一套全面基于 ESM + Vue3 + Vite + Element-Plus + TypeScript 编写的后台管理系统（兼容移动端）。仓库地址：pure-admin/vue-pure-admin，官方文档主页在这儿：纯净后台模板站点。一句话（来自仓库 description）：全面 ESM + Vue3 + Vite + Element-Plus + TypeScript 编写的一款后台管理系统（兼容移动端）。先把“核心卖点”丢给你：技术栈：Vue3 + Vite + Element Plus + TypeScript，全 ESM 状态管理：Pinia 样式生态：Tailwind CSS + SCSS 模板属性：is_template=true（可直接用作脚手架模板）移动端兼容：自适应布局与 UI 选择适配移动端许可证：MIT（放心用、好二开）官方站点与文档：https://pur...

生活最沉重的负担不是工作，而是无聊。——罗曼·罗兰首先是MDN：https://developer.mozilla.org/zh-CN/docs/Web/API/HTML_Drag_and_Drop_API 然后是代码： 123456789101112131415161718192021222324252627282930313233343536373839404142<!DOCTYPE html><html> <head> <style> .drop-container{ width: 200px; height: 200px; border: 1px solid red; background: #eee; } .drag-ball{ w...

学习和研究好比爬梯子，要一步一步地往上爬，企图一脚跨上四五步，平地登天，那就必须会摔跤了。——华罗庚 Corsair：让用户连接自己的应用，不再被集成层拖住脚步项目地址：https://github.com/corsairdev/corsair 当一个产品需要连接越来越多的第三方应用时，真正棘手的事情往往并不发生在界面上，也不只发生在某一段业务逻辑里。它会悄悄藏进每一个不同的 API、每一次认证、每一份格式各异的数据，以及不断累积的适配代码之中。 Corsair 想解决的，正是这层容易膨胀、却又无法回避的复杂性。它的定位很直接：连接你的用户与他们正在使用的应用。 Corsair 是一个功能完整的产品集成平台，强调流畅的开发体验。无论是构建一个能够跨多个集成工作的智能代理，还是搭建一个让用户自行连接应用的多租户仪表盘，Corsair 都希望成为承接这些需求的统一集成层。集成不该只服务于某一种交互方式如今，围绕智能代理构建集成能力已经成为很多产品的重要方向。但如果集成层只围绕某一种协议或某一种调用方式建立，它往往很难自然延伸到产品的其他部分。 Corsair 并不把自己限制在...

过分宽大的法律，不易使人服从；太严厉的法律，则绝少被遵守。——富兰克林分享一个前端基于canvas的图片js库 http://camanjs.com/ https://github.com/meltingice/CamanJS 安装 1npm install caman 用法： 1234567Caman('#my-image', function () { this.brightness(10); this.contrast(30); this.sepia(60); this.saturation(-30); this.render(); }); html 12345<img data-caman="brightness(10) contrast(30) sepia(60) saturation(-30)" data-caman-hidpi="/path/to/image@2x.jpg" src="path/to/image.jpg&q...

jq获取实时宽度

乐观使你倾向于幸福健康事业顺利，悲观使你倾向于绝望患病失败忧郁孤独懦怯——民谚代码如下 12345$(window).resize(() => { var height = $(window).height(); var width = $(window).width(); console.log(height+" "+width)}); 然后当我窗口大小发生变化时就会触发

阿超

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

数据加载中