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