はFabricJSグループ（JSX）

Question

NPMパッケージ反応します。私は今、グループ化を働かせようとしていますが、私は構文を理解することができません。基本的に私は、この効果を作成したいが、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のRectの言うことができるどのように - そう、彼らは回転させることができます/縮尺合わせなど？

ありがとう アダム

**エキストラ注：私は専門家に反応していていないが、私は生地を感じてもらうには、パッケージがはるかに完成からあり、コア機能が動作しない理由です反応します。

Answer 1

私はlibを調べようとしましたが、私はどのようにグループを使用するのか分かりませんでした。

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