React FabricJS Groupement (JSX)

Question

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

J'utilise réagir-fabricjs et une toile avec des icônes indiquant. J'essaye maintenant de faire fonctionner Grouping mais je ne peux pas établir la syntaxe. Essentiellement, je veux créer cet effet, mais en utilisant React code JSX:

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

C'est le code que j'ai:

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



} 

Comment pourrais-je dire le groupe le 2 Rect de - afin qu'ils puissent être mis en rotation/mis à l'échelle etc ensemble?

Adam thankyou

** Note supplémentaire: Je ne suis pas expert mais je React avoir le sentiment du tissu React forfait est loin d'être terminée et c'est la raison pour laquelle la fonctionnalité de base ne fonctionne pas.

Answer 1

J'ai essayé de vérifier la lib, je n'ai pas compris comment utiliser le groupe.

Le point principal est que vous devriez simplement utiliser fabricJS de manière normale même si vous utilisez reactJS. La liaison d'un rendu de fabricjs à un rendu de réaction peut être lente ou simplement inutile.

Le code groupe utilise:

Alors que le constructeur du groupe dans le tissu est différent.

Vous pouvez essayer 2 approches, le seul 2 qui fait sens dans 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> 

OU

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