反应 FabricJS 分组（JSX）

Posted 2023-03-25

【中文标题】反应 FabricJS 分组（JSX）

【英文标题】：React FabricJS Grouping (JSX)

【发布时间】：2018-02-14 08:03:03

【问题描述】：

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"
                
                
            >
                <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 元素，您只需要一个可以在页面加载开始时渲染的画布。

【参考方案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
        />]
      />