带Redux的Konva.js
是一种结合了Redux状态管理和Konva.js绘图库的解决方案。Konva.js是一个强大的2D绘图库，它基于HTML5 Canvas，可以实现高性能的图形渲染和交互。而Redux是一个流行的JavaScript状态管理库，用于管理应用程序的状态。
使用带Redux的Konva.js可以更好地管理和控制绘图应用程序的状态。通过Redux，可以将绘图应用程序的状态保存在一个单一的状态树中，并使用不可变的数据结构来更新状态。这使得应用程序的状态管理更加可预测和可控，方便进行状态的回退、重做以及跨组件的状态共享。
优势：
- 简化状态管理：Redux提供了一种清晰和可预测的状态管理方式，使得绘图应用程序的状态管理变得简单而高效。
- 组件化开发：Redux的状态管理机制可以让不同的组件共享同一个状态树，方便进行组件间的通信和数据共享。
- 更好的性能：Konva.js作为一种高性能的绘图库，可以利用Redux的状态管理机制来提高应用程序的性能和渲染效率。
应用场景：
- 数据可视化：通过使用Konva.js绘制图形，并结合Redux管理数据状态，可以实现复杂的数据可视化应用程序。
- 游戏开发：Konva.js提供了强大的绘图功能，结合Redux可以方便地管理游戏的状态和用户操作。
- 绘图工具：带Redux的Konva.js可以作为开发各类绘图工具的基础，例如画板、绘图编辑器等。
推荐的腾讯云相关产品： 腾讯云提供了一系列与云计算相关的产品和服务，以下是一些推荐的产品：
- 云服务器（CVM）：腾讯云提供的弹性云服务器，可以满足不同规模的应用需求。产品介绍
- 云数据库MySQL版：腾讯云提供的高性能、可扩展的云数据库服务。产品介绍
- 云函数（SCF）：腾讯云的无服务器计算服务，可以用于处理后端逻辑。产品介绍
- 云存储（COS）：腾讯云提供的对象存储服务，适用于存储和管理各类非结构化数据。产品介绍
通过结合腾讯云的产品和带Redux的Konva.js，可以构建出高性能、可扩展的云计算应用程序，并且能够灵活地管理和控制应用程序的状态。
相关·内容
2回答
我正在尝试使用konva，react-konva来构建一个react应用程序。
我构建了一个基本的react组件：
import React, { Component } from "react";
import { Stage } from "react-konva";
import Square from "./Square.jsx";
class Map extends Component {
render() {
return (
<Stage height={100} width={100}>
浏览 3提问于2017-07-13得票数 3
当我拖动舞台时，舞台仅沿x轴移动。
但是konva.js文档没有对此进行解释..
只需修改有关拖动的Konva.js源代码，我就可以使用它了吗？
还是我漏掉了什么？
浏览 2提问于2018-07-10得票数 1
1回答
我是Konva.js lib的新手，我在画布元素中实现了img的拖放，我想告诉用户img是可拖动的，所以我想做一些像这样的->
你知道如何在Konva.js中做到这一点吗？谢谢!
浏览 25提问于2019-11-04得票数 1
1回答
我目前在我的Vue.js应用程序中使用Konva.js。我想知道，他们在Konva.js中使用的是什么度量单位？我得到了一个对象数组，当我将y值增加20时，它只是稍微移动了一点。
浏览 2提问于2019-04-02得票数 2
1回答
带Redux的Konva.js
、、、、
我试过用不同的方法来解决这个问题，但是我做不到。有没有什么简单的方法可以在Redux和React钩子中使用Konva.js？ 正如我所读到的，Konva的上下文机制与React-Redux不同。因此，即使我在提供者包装器中的所有应用程序，React子组件，我在Konva中使用的，也看不到包装器。 当我在子组件中再次应用提供者包装器时，在konva的Stage标记内，应用程序没有给出任何错误，并且工作正常，但reducer状态以某种方式进入了循环。我相信子组件中的提供者完成了它的工作，但在那之后，全局提供者再次完成它的工作，并将reducer状态更改为初始状态。 为了解决这个问题，我尝试添加另
浏览 40提问于2021-08-13得票数 1
2回答
多幅图像的Konva.js优化
、、、、
我目前正在用Konva.js在几个堆叠的Konva.js上平铺许多PNG图像。PNG包含不透明，不需要拖动或命中框。瓷砖经常被更换，这似乎很好地适用于尺寸在30×30左右的中型网格。一旦瓷砖开始增长到大约100x100，甚至60x60，当替换单个瓷砖时，性能就会开始变慢。
我已经开始研究“分块”块，即将瓷砖添加到较小的FastLayer组中。例如，单个100x100 FastLayer将被划分为几个10x10 FastLayers。当单个瓷砖发生变化时，想法是只有该块应该重新呈现，理想情况下，应该加快整个呈现时间。
这是一个很好的设计尝试，还是我应该尝试另一种方法？我查看了Konva.js文档
浏览 1提问于2017-03-11得票数 6
回答已采纳
我目前正在研究fabric.js以及konva.js，fabric.js似乎具有不必手动实现所有选择工具的优势；然而，虽然在konva.js中很明显如何提取层的图像“投影”(因为每个层都有至少一个画布)，但我不知道在fabric.js中将组转换为图像(而不是svg!)是否困难。基本上，我需要一些输出对象，我可以将其转换为特定大小的位图，以便进一步处理。
感谢您的帮助:)！
浏览 3提问于2017-11-28得票数 0
我试着用redux(一种计数器)来制作一个redux的本地应用程序。我在PC上使用网站，在安卓系统中使用expo应用程序，因为由于.The应用程序运行的限制，我无法在系统中清楚地运行它，但是当我单击任何按钮时，它都会显示错误：
“未能安装模块‘react’：
试图导入缺少的模块'redux'
从App.js"“进口
我确实在package.json文件中添加了'redux'和。尽管如此，它仍然显示了相同的错误。
我做错了什么，或者在世博会中还有其他方式使用“redux”和“”？
我看到同一个应用程序运行在一个系统上使用npm和所有。因此，我怀疑这是sn
浏览 0提问于2018-03-15得票数 0
回答已采纳
1回答
以下是我尝试过的：
我使用一个名为Konva.js的库在前端创建动画。
动画包括文字、图像、形状等。
前面的一切都很好。
我想做更改文本和渲染1000 s的视频在后端。
我不确定Konva.js库是否是正确的方法。我能够运行文本动画并将它们保存在后端，使用一种将帧转换为视频的方法。
但是，我不能在画布中以视频作为背景来做文字动画。
更多细节-
我知道的概念，我可以在后端渲染视频使用无头浏览器，如幻影或普佩蒂尔。
这意味着在大规模部署它时，会有太多的计算资源，还有其他好的方法吗？
浏览 8提问于2022-01-19得票数 3
1回答
有没有办法使用konva.js将圆或方框添加到html5画布中？我试过了，但不知道怎么回事！我想要的是，例如，一次点击就是通过拖放添加一个圆，双击就会删除这个圆。
浏览 2提问于2017-11-09得票数 1
我正在使用konva.js构建一些拖放Javascript应用程序，我有一个问题:当我使用"stage.toDataURL()“命令导出图像时，导出的图像包含调整大小的边界：
如何在不调整边框行的情况下导出图像？
谢谢
浏览 6提问于2022-06-24得票数 1
回答已采纳
有人能详细说明使用Konva.TextPath类和Konva.Text类之间的确切区别吗?我在我的项目中使用Konva.js库，而且我已经在任何地方搜索过这个问题，但对此没有任何明确的解释。
希望有人能帮我out.Thanks！
浏览 2提问于2018-04-06得票数 1
回答已采纳
我只想了解JavaScript引擎的这种行为。我有一个事件侦听器，它在事件之后调用处理程序。在这个处理程序中，我刷新了令牌并将其放入redux中。在第一次调用时一切正常，但是当处理程序再次调用时，我有令牌刷新错误，因为它发送旧的刷新令牌，与redux中的不同。 import React, {useEffect, useState} from 'react';
import {useSelector, useDispatch} from 'react-redux';
import {setAuthData} from '../redux/actions/
浏览 12提问于2020-09-10得票数 1
回答已采纳
1回答
我要在我的sass文件中扩展引导类。我正在编译我的sass，就像在这个中一样。
我已经将引导文件复制到我的/src文件夹中。
但是，使用这个基本示例：
@import "bootstrap/*";
.header{
@extend .container;
background-color:red;
}
我知道错误：
“状态”：1，“文件”："C:/sites/mharrisweb-redux/src/sass/style.scss"，“行”：1，“列”：1，“消息”：“文件导入未找到或不可读: bootstrap/.\nParent样式表:
浏览 4提问于2017-10-12得票数 0
回答已采纳
我正在寻找正确的事件，以导航在画布上的两个手指在触控板上。我使用的是React Konva.js，我在网站上找到了一个很好的例子，这个问题我不想用两个手指放大或者缩小，而是导航。有人有相关的例子吗？
浏览 5提问于2022-01-19得票数 0
回答已采纳
我可以在移动环境中使用React Redux吗？我正尝试在不使用React Native的情况下在web上分发它
浏览 1提问于2021-05-03得票数 0
1回答
? ? 1个->原始图像 2图片上传后的->结果： 我正在尝试转换为黑色轮廓透明的原始图片，如下图所示。 我正在为我的项目使用Konva JS库，但我无法使用Konva.js实现此功能。 请提出一些建议来实现以下功能。
浏览 88提问于2021-04-17得票数 0
回答已采纳
我正在尝试通过容器将Redux mapStateToProps()和mapActionCreators()连接到登录屏幕，并且我使用的是React导航。
生成我的应用程序后，会出现以下错误消息：
_react“默认”.memo不是一个函数。(在“_react”默认值“.memo(ConnectFunction)”中，“_react”默认值“.memo”未定义。
我搜索了一段时间，但我得到的是React.memo()帮助我们控制组件重发时的情况，但我不使用任何与React.memo()相关的代码。
登录屏幕：(屏幕/LoginScreen/index.js)
import React f
浏览 0提问于2019-04-15得票数 14
1回答
使用konva.js，您可以在画布上创建视频组件。在这里，您可以在docs ()中看到这个示例。
现在我使用vue-konva，没有组件在画布上创建视频。您需要使用v映像组件来完成它，但是我无法使它工作。有可能用vue-konva吗？
浏览 12提问于2020-04-14得票数 2
回答已采纳
1回答
我使用konva.js，并尝试使用对齐功能对齐文本，但不能使用左对齐(右对齐和居中对齐)。 我的代码 var text1 = new Konva.Text({
y: 26,
fontSize: 40,
text: 'ligne1',
draggable: true,
width : 550,
align: 'center',
});
layer.add(text1);
layer.draw(); 谢谢
浏览 16提问于2020-12-09得票数 0
我没有在代码中使用Navigator。但是我得到了这个错误。
"dependencies": {
"react": "16.0.0-alpha.12",
"react-native": "0.45.1",
"react-native-deprecated-custom-components": "^0.1.0",
"react-native-router-redux": "^0.2.2",
"r
浏览 2提问于2017-06-20得票数 3
我在我的项目中使用Konva.js，并且我有一种特殊的需要在使用Konva.Rect() class.Is定义的可拖式矩形中定义文本，这是一种无需使用单独的Konva.Text()或Konva.Label()类对象的方法，因为这会变得非常复杂。
向suggestions.Thanks开放！
浏览 2提问于2018-04-06得票数 3
回答已采纳
我对konva.js中的Zindex有一个问题。在将所有内容添加到该层之后，我试图为每个元素分别为一个节点分配一个属性。但不起作用。例如
for(let i = 0; i<=this.layer['children']; i++){
this.layer['children'][i].setZIndex(someInt);
}
如何为层中的所有元素设置zindex？
浏览 1提问于2018-10-11得票数 3
回答已采纳
我想把这些图片拖到舞台上。但是当我丢弃图像时，我收到了这个错误。Konva.js Konva error: Can not cache the node. Width or height of the node equals 0. Caching is skipped.我想到的过程是
将图像放置到舞台中，如果点击，用户可以调整大小、旋转、拖动。
要成功地调整图像大小，我应该做什么不同的事情？
浏览 9提问于2022-01-23得票数 1
回答已采纳
在上找到迷你系列讲座之后，我已经和redux一起工作了一段时间。我试图理解redux和this.state之间的区别，以及在什么时候使用哪一种。
在redux之前，我设置了一个全局容器组件，它承载了整个应用程序的状态。例如，当它收到来自websocket的数据更改时，它将对适当的状态项调用this.setState，从而触发UI更改(例如，将一个新的TODO添加到其子组件的列表中)。我发现redux是个很好的替代品。
然而，当涉及到维护另一种状态(比如用户当前的状态)时，我发现很难使用redux，因为我必须在本质上独立于Navigator维护自己的屏幕历史。当有嵌套的导航器时，它也变得很困难，
浏览 2提问于2015-12-07得票数 4
回答已采纳
我有两个带redux表单的字段。我有一个刷新按钮，通过它我可以通过一个操作来更新我的状态。此刷新按钮可更新三个文本值。我的问题是我必须刷新表单的字段值。如何更新我的redux表单的状态。我正在考虑使用这样的选择器：
export const formsState = state => state.get('form');
然后，我将创建一个接受formstate的缩减程序，并使用
update formsState
.update('order', action.payload.price);
但我不认为这是最好的解决方案。有更好的主意吗
浏览 0提问于2017-05-17得票数 0
2回答
因此，我有相当标准的代码，但仍然不能工作。这里怎么了？
我尝试了这个解决方案，因为我有相同的错误：，但没有成功。浏览器控制台中的错误仍然是：
Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components)
Uncaught Error: Invariant Violation: Element type is inval
浏览 1提问于2015-11-20得票数 1
回答已采纳
2回答
因此，对于konva.js，我有一个包含两个文本项的组。我加入了draggable组。在拖动它之后，我打印了文本的x和y，但是它从未改变过：
group.on('dragend', function() {
var group = this;
var t = group.findOne('Text');
console.log(t.x(), t.y());
});
代码的其余部分与Konva Text Demo完全相同
浏览 4提问于2016-03-24得票数 0
回答已采纳
我有一个创建本地状态的react组件:一个查询标识符。此查询标识符是在创建组件时创建的，并且不是/不应该从组件的使用者传入。此状态仅在组件实例中使用，并且不在其他任何东西之间共享--因此，感觉在组件中作为本地状态是合适的，而不是存储在redux存储中。 react组件经由redux分派异步动作，并且当该动作完成时，结果被存储在由前述查询id索引的redux状态的集合中。 在React components mapStateToProps函数中，我希望从处于redux状态的查询结果集合中检索查询结果。然而，组件的查询id只在组件实例的本地状态中，因此显然不能从mapStateToProps访问
浏览 6提问于2019-06-21得票数 2
回答已采纳
我有一个非常具体的问题，所以:我在我的MySQL数据库中有一个中间文本。例如(带断线)：
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
我想现在
浏览 0提问于2019-07-31得票数 0
回答已采纳
我正在尝试做一个应用程序，您可以在其中绘制自定义矩形形状的对象，并能够拖动您的舞台在同一时间。有可能用Konva.js吗？
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height
});
document.addEventListener('mousedown', (e) => {
switch (e.button) {
case 0:
stage.dragga
浏览 0提问于2019-01-07得票数 1
回答已采纳
我正在使用django 1.8和django-registration-redux构建一个注册/登录工作流。现在，我正在使用默认的后端，它阻止用户登录，除非他们转到他们的电子邮件并单击激活电子邮件。这在注册流程中引入了一个明显的摩擦点。
基本上-我希望用户能够注册并开始使用我的网站，在他们注册后，而不必回到他们的电子邮件和点击激活链接。
但是，我仍然希望发送激活电子邮件-我只是不希望用户在它本身被阻止。我目前的计划是编写一个清扫器，在一段时间后提醒我未激活的用户，或者手动浏览数据库，看看谁是未激活的，然后手动采取一些未来的操作。
另一种看待它的方式-基本上，我想区分email_is_valid
浏览 2提问于2015-09-17得票数 0
因此，假设我有一个Home组件，它只执行api调用，从服务器获取所有的本地工作：
import React, { Component } from 'react';
import { fetchHomeWorks } from '../actions';
import HomeWorkRow from '../component/HomeWorkRow';
class Home extends Component {
componentDidMount() {
this.props.fetchHomeWorks()
浏览 3提问于2017-10-04得票数 2
1回答
我正在使用Redux Form和样式组件。
我想得到一个Redux表单域的引用，这样我就可以在某些情况下聚焦它。
代码看起来像这样：(稍微简化了一点)
export const SomeForm = () => (
<form onSubmit={handleSubmit} >
<FormLabel htmlFor="comment">Comment:</FormLabel>
<CommentTextArea
name="comment"
component="t
浏览 14提问于2017-08-15得票数 0
回答已采纳
我试图用konva.js (利用)在Vue中创建一个spritesheet动画。
在纯konva.js中，Sprite对象被创建为 &简而言之，首先创建图像对象，然后在Image的onload回调中创建Sprite对象。
var imageObj = new Image();
imageObj.onload = function() {
var blob = new Konva.Sprite({
x: 50,
y: 50,
image: imageObj,
animation: 'idle',
animations: anim
浏览 0提问于2018-11-22得票数 1
回答已采纳
当我在WebStorm (Angular)中调试时，它会启动一个新的会话Chrome浏览器，但删除了所有的扩展，但是我希望在调试会话中保留Redux扩展。有可能吗？
浏览 1提问于2019-04-24得票数 0
2回答
如果我有带汽车列表的redux商店。
我使用这个列表来填充几个组件，比如dropdown和table (可以过滤)。
当我过滤表格时，我的下拉列表将被过滤到，除了它在其他页面上，他们共享相同的商店。
如果我克隆存储中的那部分数据，我将失去在所有地方添加/编辑的选项。
针对这类情况的最佳实践是什么？也许还有一些例子？
浏览 3提问于2017-07-11得票数 1
1回答
我正在用redux构建一个react应用程序。redux管理的状态是对象的对象。我想从状态中迭代一个对象，并使用map呈现它。因此，我使用了_.values来获取对象数组(因为我想要呈现的对象也是对象的对象)。但是，values方法没有返回带所有对象的数组，而是返回长度为1的数组包含整个对象。这是app组件：
const App = () => {
const { contacts } = store.getState();
console.log(_.values(contacts))
return (
<div className="App"
浏览 0提问于2018-06-12得票数 1
回答已采纳
1回答
我使用的是带Redux的Angular 2+，很好，但不能用新值修改数量
错误是: TypeError:不能分配给对象'object Object‘的只读属性'quantity’
export interface CartState {
readonly cars: CartCarModel[]
}
export class CartCarModel {
constructor (
public carId: string,
public carModel: string,
public quantity: numb
浏览 6提问于2021-02-19得票数 0
1回答
请解释一下从node_modules文件夹中使用导入/要求库的思想。
我只想在我的简单项目中使用konva.js，使用node.js作为后端，配置了活动服务器扩展。
如果我像这样将它导入HTML文件
<script src="https://unpkg.com/konva@4.0.0/konva.min.js"></script>
<script> /*using konva library here or *.js*/</script>
一切正常
据我所知，这个URL直接将整个konva.min.js导入到我的HTML中。
如果
浏览 3提问于2020-05-09得票数 3
回答已采纳
我正在学习Redux，随着react-router-dom的新变化，我有点困惑。我有这些文件：
Index.js
import React from 'react';
import { Provider } from 'react-redux';
import ReactDOM from 'react-dom';
// import { AppContainer } from 'react-hot-loader';
import App from './containers/App';
import store
浏览 2提问于2017-05-06得票数 10
回答已采纳
我正在尝试使用"redux-form"："^6.7.0“和"react-bootstrap"："^0.31.0”。
我的组件呈现得很好，但是当我按Submit时，我看到的是一个空对象。
注意:我尝试过先用connect包装Config，然后如下面所示，首先用redux-form包装它，然后用from react redux connect()包装它。
Configuration.js
class Config extends Component {
render() {
const { ServerPort, UserID
浏览 2提问于2017-05-11得票数 11
回答已采纳
我正在尝试使用redux和redux thunk运行一些异步代码。不管是什么原因。当我尝试运行时，代码操作显示为undefined，并得到以下错误。
Cannot read property 'type' of undefined
我所有的动作创建者都返回一个带类型的对象，所以我不知道它有什么可悲之处。
我这样设置我的商店
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View
} from 'react-native';
import App
浏览 4提问于2017-06-01得票数 0
我在我的应用程序中使用：
后端: Nodejs、Express、Passport js和Mongoose，项目结构为:带猫鼬模型、控制器和路线。我们叫这个架构什么？
前端: React，Redux和reactstrap :我们把这种架构称为什么？
并使用k8s和api网关在微服务中进行部署。
我需要知道这是什么类型的架构(软件、应用程序和系统)？什么样的设计模式？
MVC体系结构、微服务体系结构和多层体系结构有什么区别？谢谢
浏览 5提问于2020-06-15得票数 1
1回答
我正在与一个小组合作，构建一个交互界面，它将呈现一个节点列表，并展示它们是如何连接的，就像一些数据库建模人员的情况一样。这是在一个预先存在的应用程序中，我们将有多达几千个数据点可以被拖动。
有些人提到使用画布元素或包(如Konva.js或D3 )。我想知道像使用画布或React这样的选项是否能够处理这样的事情，或者我们是否需要使用类似D3之类的替代方案。有人对此有任何经验或知识吗？
浏览 0提问于2021-07-28得票数 0
回答已采纳
1回答
上传时保持图像比率
、、、
当我上传图片到konva.js时，是否有办法保持图像的比例。基本上，我使用konva和Vue扩展，我需要这样的方法上传背景图像。我已经设置了基于用户设备的画布大小，我可以使上传图像大小到画布尺寸，但它不会节省它的比例。
我认为，我可以通过编写函数来确定图像的最大高度或宽度(在特定情况下选择哪个更合适)，然后按比例调整它的大小，但我不认为这个答案是优雅的和没有bug的，所以我想在做之前我会先问一下。
浏览 0提问于2018-11-28得票数 0
回答已采纳
1回答
我是一个图形noobie，需要帮助理解各种javascript 2D库的功能。。。
我从Pixi.js中得到了什么，而不是从基于画布的库(如Konva )中获得的呢？
如果我没有从Konva.js /SVG/CSS库(如D3.js )中得到什么，那么我能从其中得到什么呢？
在这一点上，我所理解的就是Pixi是一个WebGL库，所以您可以通过GPU获得更快的渲染速度。但是，我不知道如何描述Konva做了什么/它是如何工作的。
任何对行话等方面的帮助都将不胜感激！
浏览 1提问于2019-09-15得票数 9
当我在主页上单击"Profile“时，这会带我进入"Profile”组件，表单输入将被存储在以前的"user“redux状态的数据填充。当我刷新页面时，所有的输入都变成空白，尽管分配了"loadOrCreateUser“(这可以从后端获取当前用户)并在useEffect钩子中设置表单数据。
页面刷新后，我检查了redux状态，"user“状态实际上包含了用户的信息，但是表单数据没有被设置。这真的很奇怪，因为在刷新之后，来自useSelector的“用户”变成了不明身份者，但是“用户”redux状态有数据。
Profile.js组件
import Reac
浏览 3提问于2021-09-03得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
