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属性aspect-ratio 大家其实能看出来值2/1就是宽高比这个属性在width和height只要有任意一个没有配的情况下就会生效，非常方便用于配置一些指定宽高比例的场景

新版vue项目的创建

下载nodejs 然后一直下一步安装就行打开vscode 点击左下角的点击终端（Win+R输入cmd或者powershell一样的）然后开始安装vue 1234567891011121314151617181920212223242526#查看版本(如果nodejs安装完了还是显示不是内部或外部命令，也不是可运行的程序或批处理文件，重新打开一下vscode或命令框)PS C:\Users\1> npm -v6.14.5#安装cnpmPS C:\Users\1> npm install -g cnpm --registry=https://registry.npm.taobao.org#查看cnpm版本PS C:\Users\1> cnpm -vcnpm@6.1.1 (C:\Users\1\AppData\Roaming\npm\node_modules\cnpm\lib\parse_argv.js)npm@6.14.5 (C:\Users\1\AppData\Roaming\npm\node_modules\cnpm\node_modules\npm\...

爱情沉默的地方，责任就要起作用——歌德 introjs是一个前端指引库官网：https://introjs.com/ github：https://github.com/usablica/intro.js 用法也很简单：引入： 12npm install intro.js --saveyarn add intro.js 或者 12https://unpkg.com/intro.js/minified/intro.min.jshttps://unpkg.com/intro.js/minified/introjs.min.css 使用： 12345678introJs().setOptions({ steps: [{ intro: "Hello world!" }, { element: document.querySelector('#login'), intro: "Click here to login!" }]}).st...

vue2.0配置路由

古希腊哲学家芝诺的学生问他：“老师，难道你有不懂得的东西吗？”芝诺风趣地回答：“如果用小圆代表你们学到的知识，用大圆代表我学到的知识，那么大圆的面积是多一点；但两圆之外的空白，都是我们的无知面，圆越大，其圆周接触的无知面就越多。” 先说下端口配置吧项目根目录下新建一个文件叫vue.config.js 12345module.exports = { devServer: { port: 3000 }} 然后npm run serve运行项目，可以看到端口号变了然后再配置个路由吧 1cnpm i vue-router 在main.js中引入 123456789101112import Vue from 'vue'import App from './App.vue'import router from '@/router'Vue.config.productionTip = falsenew Vue({ router, rend...

与情人的小冲突，常常要靠温存、沉默和忍耐来解决，而说理往往无济于事。——安德烈·莫洛亚分享一个前端库qs https://github.com/ljharb/qs 主要是用于请求参数和对象的互转 12345678var qs = require('qs');var assert = require('assert');var obj = qs.parse('a=c');assert.deepEqual(obj, { a: 'c' });var str = qs.stringify(obj);assert.equal(str, 'a=c');

react hook 生命周期

诚实的生活方式其实是按照自己身体的意愿行事，饿的时候才吃饭，爱的时候不必撒谎。——马尔克斯《霍乱时期的爱情》官方文档：https://zh-hans.reactjs.org/docs/hooks-reference.html#conditionally-firing-an-effect 直接上代码： 123456789101112131415161718192021222324252627282930313233343536373839404142'use strict';function LikeButton() { const [liked, setLiked] = React.useState(false) const [count, setCount] = React.useState(0) React.useEffect(() => { // 只执行一次 setInterval(() => setCount(state => ++state), 1000) ...

阿超

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

数据加载中