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

相关推荐

与情人的小冲突，常常要靠温存、沉默和忍耐来解决，而说理往往无济于事。——安德烈·莫洛亚分享一个前端库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');

业精于勤，荒于嬉。—— 韩愈《进学解》 https://github.com/simonwep/pickr Pickr：一个简单、多主题、响应式且可定制的颜色选择器库在网页设计和前端开发中，颜色选择器是一个不可或缺的工具。虽然许多框架提供了内置的颜色选择器，但它们往往难以扩展或自定义。Pickr 是一个轻量级、无依赖的颜色选择器库，它提供了丰富的功能，同时完全兼容所有主流 CSS 框架。什么是 Pickr？Pickr 是一个开源的颜色选择器库，支持多种颜色格式（如 rgba、hsla、hsva 等），并提供多种主题和自定义选项。它专为现代前端开发设计，具有以下特点：核心特点：无依赖：不依赖任何第三方库（如 jQuery）。多格式支持：支持 rgba、hsla、hsva、hex 和 CMYK 格式。多主题：内置多种主题样式，兼容主流 CSS 框架（如 Bootstrap、Materialize）。响应式设计：适配移动端和桌面端。自定义能力：可通过 JavaScript 和 CSS 轻松自定义外观和功能。支持透明度：包括 alpha 通道的选择。轻量级：小巧...

安装prettier-vscode并指定

纯洁的思想，可使最微小的行动高贵起来。——莎士比亚我们在使用vscode格式化代码时，可能有多个可选的格式化风格方案，这里使用prettier进行其github地址： https://github.com/prettier/prettier-vscode 安装完毕后即可指定

在vue2的style标签中使用css变量

我需要，最狂的风，和最静的海。——顾城《世界和我·第八个早晨》前两天有一个更换主题需求，想将系统主题包括hover颜色都更换代码如下： 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748<template>  <div class="hello" :style="css"> <h1>{{ msg }}</h1> <p> For a guide and recipes on how to configure / customize this project,<br> check out the <a href="https://cli.vuejs.org" target="_...

Apache-ShenYu支持namespace功能（二）

我曾踏足山巅，也曾进入低谷，二者都让我受益良多。——《英雄联盟》瓦洛兰之盾塔里克上一期：Apache-ShenYu支持namespace功能喜闻乐见，这是个连续系列，今天主要是给shenyu-dashboard的selector部分添加namespace适配 PR连接： https://github.com/apache/shenyu-dashboard/pull/471 这里有一个知识点 123456import { connect } from "dva";@connect(({ global }) => ({ currentNamespaceId: global.currentNamespaceId,}))class RuleCopy extends Component {} 装饰器语法 @connect 来连接组件与 dva 的状态管理。@connect 是一个高阶函数，通常用于将 Redux store（在 dva 中表现为 model）中的状态映射到组...

人的一生是短的，但如果卑劣地过这一生，就太长了——莎士比亚在前端开发中，可能会有“需要从数组里取出符合条件的某条数据”这个需求我们可以使用find函数 123var list = [1,4,3,2,5];console.log(list.find(n=>n===4)) // 输出结果4，取出满足条件的值var index = list.findIndex(n=>n===4) // index = 1，取出满足条件的值的下标这样就从我们的list数组中取出了满足n===4这个条件的值

阿超

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

数据加载中