Question

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个矩形 - 所以它们可以一起旋转/缩放等？

三江源亚当

**额外注意：我没有React Expert，但我觉得Fabric React Package远未完成，这就是为什么核心功能不起作用的原因。

Answer 1

我试图检查lib，我没有得到如何使用该组。

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

组代码正在使用：

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

你可以尝试两种方法，唯一有意义的方法：

curl -k -d "grant_type=client_credentials&scope=accounts payments" -H "Authorization: Basic "XXXXXXX" https://api-openbanking.wso2.com/TokenAPI/v1.0.0/

OR

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

React FabricJS分组（JSX）

1 个答案: