阵营FabricJS分组（JSX）

Question

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

我使用的反应，fabricjs并有一些图标显示的画布。我现在试图让分组工作，但我无法解决语法问题。基本上我要创建这种效果，但使用阵营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> 
     ) 
    } 



} 

我怎么能说组2矩形的 - 所以它们可以旋转/缩放等？

三江源 亚当

**额外注：我不是专家做出反应，但我感觉的面料做出反应包装还远远没有完成，这就是为什么核心功能不起作用。

Answer 1

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

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

组码是使用：

尽管在织物的组的构造是不同的。

你可以试试2点的方法，只有2有意义的反应：

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

OR

 <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} 
     />]} 
     />