konva-react

发表于2022-06-15|更新于2026-02-24

|浏览量:

“善良一点，因为大家的一生都不容易。”——《奇迹男孩》。

官方文档：https://konvajs.org/docs/react/

中文文档：http://konvajs-doc.bluehymn.com/docs/react/

安装：

1	pnpm install react-konva konva --save

在konva中能做到的，在konva-react也一样能做到，只不过是换了一种写法罢了

这里有个使用konva-react的在线编辑器Demo

https://konvajs.org/docs/sandbox/Canvas_Editor.html

是基于一个叫Polotno的框架，它提供了多种react对konva的封装，能开箱即用

https://polotno.dev/

但其不可以免费用于商业用途

https://codesandbox.io/embed/github/polotno-project/polotno-site/tree/source/examples/polotno-demo?fontsize=11&hidenavigation=1&theme=dark&view=preview

可以算得上是最佳实践了

相关推荐

antdv动态表单组件

你已春色摇曳，我仍一身旧雪。——送花的人走了分享一个自己写的antdv动态表单组件 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618...

js当前函数获取调用它的函数

教育本质是一棵树摇动另一棵树，一朵云推动另一朵云，一个灵魂唤醒另一个灵魂。——雅斯贝尔斯转载，原文当我们在调试的时候，想获取这个函数被哪个函数调用，以方便调试，但是 caller属性被严格模式下被禁用了我们可以通过 (new Error()).stack.split(“\n”)[2].trim().split(“ “)[1]方法来获取调用当前函数的那个函数名解释：new Error().stack 表示程序出错位置的栈，[0]表示当前函数，[1]表示上一级函数调用的函数 [2]上上级…. 例子： 123function bb(){cc()} function cc(){console.log((new Error()).stack.split("\n")[2].trim().split(" ")[1])} bb() //打印出bb

js中classList的toggle

当你身处逆境时不邀自来的人，才是真正的朋友。——奇奥佛垃斯塔在 HTML 中实现白天和夜晚主题切换在现代网页设计中，为用户提供不同的主题（如白天和夜晚模式）是一种常见且友好的用户体验优化方式。通过使用 JavaScript 和 CSS，我们可以轻松地实现这一功能。本文将详细讲解如何使用简单的 HTML、CSS 和 JavaScript 实现一个白天和夜晚主题切换功能。实现步骤基本 HTML 结构：首先，我们需要创建一个基本的 HTML 结构，包括一个按钮用于切换主题。 CSS 样式：接下来，我们定义白天和夜晚模式的样式。默认情况下，页面为白天模式。 JavaScript 功能：最后，通过 JavaScript 实现点击按钮切换主题的功能。代码示例以下是完整的代码示例： 123456789101112131415161718192021222324252627<!DOCTYPE html><html><head> <title>Day-Night Toggle</title> <sty...

常制不可以待变化,一涂不可以应万方,刻船不以索遗剑。一一东晋·葛洪《抱朴子》 https://github.com/mfts/papermark Papermark：开源 DocSend 替代方案，智能文档分享新体验在数字化办公和远程协作日益普及的今天，文档安全分享与跟踪成为企业和个人不可或缺的需求。你是否曾因为发送合同、方案、报告时无法精准掌控访问和分析而苦恼？你是否希望拥有一款既能自定义品牌，又能实时统计文档访问的数据房间工具？如果你的答案是肯定的，那么你一定要试试 Papermark —— 一个正在快速崛起的开源 DocSend 替代项目！一、项目简介Papermark 是一款完全开源的文档分享与跟踪平台，被誉为“开源版 DocSend”。它支持个性化品牌、定制域名、内置访问分析，并允许开发者和企业自部署、自定义，保障数据安全和可控性。项目主页：https://papermark.com GitHub地址：https://github.com/mfts/papermark 项目定位：开源、安全、可自托管、可扩展的数据房间/文档分享平台最新 Star 数...

仅仅对自然做种种临摹，并不会创造出什么伟大的艺术作品。——佚名 Vine.js 是一个轻量级、易于使用的 JavaScript 表单验证库，它的设计理念是简洁和灵活，特别适合前端和后端应用中的数据验证。无论是在前端用户输入时，还是在后端 API 请求时，Vine.js 都能帮助开发者快速、高效地进行数据验证，确保数据的完整性和准确性。项目介绍Vine.js 诞生的目标是为 JavaScript 应用程序提供更简单、清晰的数据验证方法。它允许开发者定义一系列验证规则，并轻松地应用于不同的数据场景。通过其简洁的 API 设计和全面的错误处理，Vine.js 提供了直观的方式来定义验证逻辑，减少开发者手动编写验证代码的时间和精力。主要特点：简单易用：通过简洁的 API，让验证规则定义和应用变得更加直观。灵活的错误处理：支持定制错误消息，并可以灵活地处理验证失败时的行为。适用于前后端：无论是用于前端表单验证，还是后端 API 的请求参数验证，Vine.js 都能够胜任。良好的扩展性：支持自定义验证器，允许开发者根据需要扩展库的功能。官方文档和 GitHub 地址官...

我来到这个世界，为了看看太阳和蓝色的地平线。——《城门开》分享一个vue虚拟列表的组件： https://github.com/tangbc/vue-virtual-scroll-list 官方文档： https://tangbc.github.io/vue-virtual-scroll-list 沙盒： https://codesandbox.io/s/live-demo-virtual-list-e1ww1 使用方式： 1pnpm install vue-virtual-scroll-list --save 示例： 12345678910111213141516171819202122232425<template> <div> <virtual-list style="height: 360px; overflow-y: auto;" // make list scrollable :data-key="'uid'" :data-sources=&q...

阿超

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

数据加载中