问题标签 [react-canvas]

使用 react 0.13.3 和新的 react-canvas。我越来越

Invariant Violation: addComponentAsRefTo(...): 只有 ReactOwner 可以有 refs。这通常意味着您正在尝试将 ref 添加到没有所有者的组件（即不是在另一个组件的render方法中创建的）。尝试在一个新的顶级组件中渲染这个组件，该组件将保存 ref。

使用以下代码。它是从 compile-to-jsx 语言生成的，所以即使在清理一下之后看起来也有点难看。

我有一个通过Fabric.js使用大量 HTML5 画布的应用程序。该应用程序是在Angular 1.x之上编写的，我计划将其迁移到React。我的应用程序允许编写文本和绘制线条、矩形和椭圆。也可以移动、放大、缩小、选择、剪切、复制和粘贴一个或多个这样的对象。还可以使用各种快捷方式缩放和平移画布。简而言之，我的应用程序充分利用了 Fabric.js。

我找不到太多关于如何将 Fabric.js 与 React 一起使用的信息，所以我担心的是 1. 是否可以在没有重大修改的情况下进行，以及 2. 是否有意义或者我应该使用其他一些广泛的画布库对 React 有更好的支持吗？

我能找到的 React+Fabric.js 的唯一示例是react-komik，但它比我的应用程序要简单得多。我主要关心的是 Fabric.js 的事件处理和 DOM 操作，以及它们对 React 的影响。

似乎还有一个 React 的画布库，称为react-canvas，但与 Fabric.js 相比，它似乎缺少很多功能。

在 React 应用程序中使用 Fabric.js 时，我必须考虑什么（关于 DOM 操作、事件处理等）？

我正在尝试通过在 React.js 应用程序中用鼠标拖动区域来突出显示图像的区域，就像在 Mac 或 Windows 上一样。

我知道这最好在画布上完成，通过将画布覆盖在图像上，然后捕捉鼠标事件并相应地绘制矩形，是否有一个好的库或其他东西可以做到这一点？因为编写原始代码来实现这一点似乎是在重新发明轮子。

提前致谢。

我想将我在 React 画布上的绘图作为 jpeg 图像文件下载到我的桌​​面，然后将其传递给 python 文件进行分类。有人可以指定一个代码来下载 React 画布绘图，或者建议一种更好的方法来实现这个想法吗？

这个函数只是清除反应画布而不先下载它。

我想使用 Html5 Canvas、Js 和 React 开发用户流程图库。有人可以指导我吗？

我正在使用 React-Konva 库来使用我的调色板创建形状。然后我拖动它进行连接。但是一旦它被连接，它应该是可拖动的组应该只适用于每个项目。

我在 const 全局变量中放入了不同的形状。

现在，一旦我检查了调色板按钮，我将变量推入数组中，但是一旦形状变量的连接器接触反应角度，那么它应该作为单个元素加入或分组

1. 首先，连接器意味着形状不应跨越矩形或不能进入矩形边界内。
2. 连接后，单个形状或矩形不应移动，而是像一组一样集体移动

ps 解决了我遇到的问题，但如果你有时间，我仍然想听听你对这个和我的代码的想法:)

我只能在渲染完成后为该变量赋值，所以我假设我必须在 useEffect() 中声明该变量，并且不可能在全局范围内为其赋值（在任何渲染之前执行）。但我也想在另一个 useEffect() 中使用该变量，但我不能，因为它是在函数内部声明的，它不属于全局范围。另外，有两个 useEffect -s 是否正常？我需要获取画布的上下文，并保持该上下文一致（不是在每次 DOM 更新时获取新的上下文，因为当我不将 [] 作为第一个 useEffect 的第二个参数时会发生这种情况）。另一个是在状态变化时使用独特的上下文来做事。是否有意义？我的代码：

我在 React JS 中使用了 React canvas draw。我从 getData 函数得到响应，但我想使用图像格式的响应，但我无法获取图像。

这是画布的回应：

{"行":[{"点":[{"x":106.38525113810485,"y":128.7116646293009},{"x":104.33783518839755,"y":138.17264931304558},{"x":104.35783518839" :138.17264931304558},{"x":105.28841266564595,"y":138.38490495205284},{"x":105.53382940471376,"y":138.46065940042593},{"x":107.39417523114616,"y":138.9496178215412},{"x" :111.81145744120575,"y":140.662199242698},{"x":121.10859880426884,"y":144.96240335143577},{"x":133.3789723776997,"y":151.4148614836932},{"x":142.4388370090569,"y":156.30247103748178 },{"x":146.39113592005003,"y":158.39179146846809},{"x":148.37125720237177,"y":159.42955777860809}],"BrushColor":"#c78c44","brushRadius":10}],"width":400,"height":400}

如果有人有任何解决方案，请分享。

我是使用 Fabric Js 反应的新手。我只是试图设置当前的活动图像。我的问题是在选择设置getActiveObject()画布图像后变为白色。我尝试了一些方法，但我找不到解决方案。

演示链接：https: //o8n8h.csb.app/ Codesandbix 链接：https ://codesandbox.io/s/eloquent-platform-o8n8h?file=/src/App.js

这是我的示例代码

在我当前的项目中，我想用 react 和 react-konva构建类似图像编辑器的东西。

首先，我用一些道具和默认的可拖动星星渲染了一个 konva 舞台。

在下一步中，我们可以使用Imagereact-konva 为我们的舞台设置背景图像。

下一步，也是最后一步。

我们可以将 konva 阶段保存为 json 格式吗？