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

相关推荐

dvajs中@connect在hook下使用

美而无德，有如没有香味的花，徒有其表。——笛福在Dva.js中，@connect 是 connect 的语法糖，它允许我们更方便地将模型（models）与组件进行映射。在类组件中使用 @connect 是非常直观的，但在函数式组件（hook）中，由于函数组件的渲染逻辑是由函数本身直接定义的，而不是通过继承 React.Component，因此我们不能直接使用 @connect 装饰器。不过，我们可以通过使用 connect 函数的 Hook 版本来实现类似的功能。在函数式组件中，我们可以使用 useSelector 和 useDispatch 这两个 hooks 来分别获取 state 和 dispatch action。这样，我们就可以在函数式组件中实现与 @connect 相似的效果。下面是一个如何在函数式组件中使用 connect 的示例： 12345678910111213141516171819202122232425262728293031323334import React from 'react';import { con...

渐变的艺术：变量的力量——阿超与ChatGPT 4o的代码探险

人类之所以有进步，主要原因是下一代不怎么听上一代的话。——倪匡效果在右下角，请滚动页面查看～ .scroll-text { position: fixed; bottom: 10%; right: 10%; background: linear-gradient(180deg,var(--color-light) 0%,var(--color-light) 40%,var(--color-dark) 60%,var(--color-dark) 100%); background-size: 100% 200%; background-position: center calc(var(--scroll) * 100%); background-repeat: no-repeat; -webkit-background-clip: text; -webkit-text-fill-color: transparent;...

万人都要将火熄灭，我一人独将此火高高举起。——海子 https://github.com/greensock/GSAP https://gsap.com/ GSAP 是一个与框架无关的JavaScript 动画库，可将开发人员变成动画超级英雄。构建适用于所有主要浏览器的高性能动画。动画 CSS、SVG、canvas、React、Vue、WebGL、颜色、字符串、运动路径、通用对象…任何 JavaScript 可以触及的内容！ GSAP 的ScrollTrigger插件以最少的代码提供令人惊叹的基于滚动的动画。 gsap.matchMedia()使构建响应式、易于访问的动画变得轻而易举。没有其他库能够提供如此先进的测序、可靠性和严格的控制，同时解决超过 1200 万个站点的实际问题。 GSAP 解决了无数浏览器不一致的问题；你的动画就可以了。从本质上讲，GSAP 是一个高速属性操纵器，可以随着时间的推移以极高的精度更新值。它比 jQuery 快 20 倍！ GSAP 完全灵活；把它撒在你想要的地方。零依赖。有许多可选插件和缓动功能可以轻松实现高级效果，例如滚动、变形、沿运动...

elementUI去掉input上下按钮

快乐就像香水，不是泼在别人身上，而是洒在自己身上。——拉尔夫·沃尔多·爱默生我们使用el-input当type为number时会出现右边这种箭头，影响美观我们可以使用样式穿透 1<el-input type="number"></el-input> 123/deep/ input::-webkit-inner-spin-button { -webkit-appearance: none;} 然后就可以去掉这两个箭头啦

人之贤不肖譬如鼠矣，在所自处耳！――《李斯列传》聊聊vuex，官方文档：https://vuex.vuejs.org/zh/ 介绍就不赘述了，直接上使用安装： 1cnpm install vuex --save 我们新建一个store，再创建一个index.js 再新建一个modules目录，里面放上 value.js 在main.js中我们写入 123456789101112import Vue from 'vue'import App from './App.vue'import router from '@/router'import store from '@/store';Vue.config.productionTip = falsenew Vue({ router, store, render: h => h(App)}).$mount('#app') 挂载完毕后，我们编写main.js和value.js main.js 1...

请给我勇气和欢愉，我要攀登这一天的顶峰。——博尔赫斯 vercel可以快速开发前端网站然后一键部署网址：https://vercel.com/ 进来后我们登陆了可以看到控制台，创建一个应用我这里选择一个nuxt.js的模板，点击create 我们的代码就已经自动clone到我们的github仓库中了此时开始了自动部署在一阵烟花特效后，点击Go to Dashboard可以回到控制台进入我们的应用点击visit即可访问完成

阿超

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

数据加载中