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

相关推荐

html构建桌面端应用框架tauri

即使通过自己的努力知道一半真理，也比人云亦云地知道全部真理还要好些。——罗曼·罗兰分享一个用html、css、javascript构建桌面端应用的另一个框架 https://tauri.app/ https://github.com/tauri-apps/tauri 和 Electron 的主要区别是它更快，而且是用Rust编写，前端是用 TAO 和 WRY，更加轻量，内存占用更小，不嵌入Chromium，但是需要你会一点点Rust，这对我来说不是事儿，我早就在2022-02-01开始rust的简单入门 rust安装安装vscode的rust插件使用cargo创建rust程序并运行创建项目非常简单！ 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697...

箭头函数和解构赋值混用

一个人的礼貌是一面照出他的肖像的镜子。——歌德我们在前端对数组进行操作时，如果使用map函数，编写的箭头函数其实也是可以解构的例如经常遇到的，将一个对象数组中的属性，更换另一个属性名，用于给vue组件传值写法如下： 1[{name:'achao',id:1},{name:'阿超',id:2}].map(({name:username,id:userId})=>({username,userId})) 注意的是，结构赋值需要打括号，下方再举一个例子，这里用flatMap收集全部的name和id直接变为一个数组 1[{name:'achao',id:1},{name:'阿超',id:2}].flatMap(({name,id})=>[name,id])

用canvas消除锯齿的方式

不和不可以接物，不严不可以驭下。——林逋分享几种canvas消除锯齿的方式 1. 线条坐标增加0.5123456789<canvas id="canvas1" width="200" height="200"></canvas><script> var canvas = document.getElementById('canvas1'); var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.moveTo(0, 0.5); // 使用0.5增量对齐像素 ctx.lineTo(200, 0.5); // 绘制一条边缘清晰的直线 ctx.stroke();</script> 2. 使用高清画布1234567891011<canvas id="canvas2" style="width:200px; height:200px...

以权利合者，权利尽而交疏。——《史记》如果我们需要使用js来编辑word、excel、powerpoint 可以使用这个开源项目：https://github.com/Ziv-Barber/officegen 可以让我们在html中进行编辑安装使用： 1$ npm install officegen ppt例子： 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354const officegen = require('officegen')const fs = require('fs')// Create an empty PowerPoint object:let pptx = officegen('pptx')// Let's add a title slide:let slide = pptx.makeTitleSlide('Officeg...

js实现出拳蓄力发射效果

贤妻和健康是一个男子最宝贵的财富。——斯珀吉翁分享一个蓄力出拳的特效这个效果放到了codepen里 123456789101112131415161718<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>蓄力发射拳头</title><link rel="stylesheet" href="style.css"></head><body><div id="rocket-container"> <div id="rocket">✊</div>...

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

数据加载中