反应 FabricJS 分组（JSX）答案

【问题标题】：React FabricJS Grouping (JSX)反应 FabricJS 分组（JSX）
【发布时间】：2018-02-14 08:03:03
【问题描述】：

NPM 包：https://www.npmjs.com/package/react-fabricjs

我正在使用 react-fabricjs 并且有一个显示一些图标的画布。我现在正试图让 Grouping 工作，但我无法弄清楚语法。本质上我想创建这种效果，但使用 React JSX 代码：

这是我的代码：

import React from 'react';
import {Canvas, Circle, Image, Path, Text, Rect, Ellipse, Triangle, Group} from 'react-fabricjs';


export default class CanvasFabric extends React.Component {


    render() {
        return (
            <Canvas
                ref="canvas"
                width="556"
                height="371"
            >
                <Circle
                    ref="circle"
                    radius={20}
                    left={100}
                    top={50}
                    stroke="green"
                    fill="blue"
                    blur={100}
                    color="rgba(0,0,0,0.6)"
                />
                <Image
                    src="https://cloudinary-a.akamaihd.net/bountysource/image/twitter_name/d_noaoqqwxegvmulwus0un.png,c_pad,w_200,h_200,b_white/fabricjs.png"
                    width={64}
                    height={48}
                    left={10}
                    top={50}
                />
                <Rect
                    ref="rect1"
                    width={50}
                    height={50}
                    left={150}
                    top={150}
                    fill="orange"
                    shadow="rgba(0,0,0,0.3) 5px 5px 5px"
                />
                <Rect
                    ref="rect2"
                    width={60}
                    height={60}
                    left={145}
                    top={145}
                    stroke="purple"
                    strokeWidth={2}
                    blur={20}
                />
                <Ellipse
                    ref="ellipse"
                    width={20}
                    height={100}
                    offsetX={350}
                    offsetY={250}
                    stroke="orange"
                    strokeWidth={2}
                    fill="yellow"
                />
                <Triangle
                    ref="tri"
                    width={20}
                    height={20}
                    left={350}
                    top={250}
                    stroke="orange"
                    strokeWidth={1}
                    fill="black"
                    opacity={0.3}
                />
                <Text text="Edit me"
                    top={300}
                    left={10}
                    shadow="rgba(0,0,0,0.3) 5px 5px 5px"
                    stroke="#ff1318"
                    strokeWidth={1}
                    fontStyle="italic"
                    fontFamily="Hoefler Text"
                />
            </Canvas>
        )
    }



}

我怎么能说将 2 个 Rect 组合在一起 - 这样它们就可以一起旋转/缩放等？

谢谢你亚当

** 额外说明：我不是 React 专家，但我感觉 Fabric React 包还远未完成，这就是核心功能不起作用的原因。

【问题讨论】：

react-fabricjs 是一个包吗？你能分享一个链接吗？
对不起，我没有包括它 - npmjs.com/package/react-fabricjs
我花了一些时间检查那个库，我并没有真正得到它的用途。你确定你需要它吗？
不确定你是否应该仅仅因为你正在使用反应而使用这个包。我们还使用了对 fabric js 的反应，但我们使用的是原始的 fabric js。 React 应用程序只是维护状态，并且基于状态更改，您仍然可以调用原始的 fabrijs api，因为您实际上不需要渲染任何新的 dom 元素，您只需要一个可以在页面加载开始时渲染的画布。

标签： reactjs canvas fabricjs jsx

【解决方案1】：

我试图检查库，但我不知道如何使用该组。

重点是即使您使用的是 reactJS，您也应该以正常方式使用 fabricJS。将fabricjs 渲染绑定到react 渲染可能会很慢或者根本没有必要。

组代码正在使用：

虽然 Fabric 中的 Group 构造函数不同。

您可以尝试 2 种方法，只有 2 种在 react 中有意义：

      <Group>
        <Rect
            ref="rect1"
            width={50}
            height={50}
            left={150}
            top={150}
            fill="orange"
            shadow="rgba(0,0,0,0.3) 5px 5px 5px"
        />
        <Rect
            ref="rect2"
            width={60}
            height={60}
            left={145}
            top={145}
            stroke="purple"
            strokeWidth={2}
            blur={20}
        />
     </Group>

或

      <Group
        objects={[<Rect
            ref="rect1"
            width={50}
            height={50}
            left={150}
            top={150}
            fill="orange"
            shadow="rgba(0,0,0,0.3) 5px 5px 5px"
        />,
        <Rect
            ref="rect2"
            width={60}
            height={60}
            left={145}
            top={145}
            stroke="purple"
            strokeWidth={2}
            blur={20}
        />]}
      />

【讨论】：