React FabricJS分组(JSX)

Question

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

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

http://jsfiddle.net/anwjhs2o/1/

这是我的代码：

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>
        )
    }



}

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

谢谢你，亚当

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

Answer 1

我试着检查lib，我不知道如何使用群组。

要点是，即使您使用的是reactJS，也应该以正常的方式使用fabricJS。将fabricjs _S渲染器绑定到react渲染器可能很慢或者只是不必要。

组码使用的是：

​

而fabric中的Group构造函数则不同。

您可以尝试两种方法，这是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}
        />]}
      />