Tengo dos objetos, un círculo y un cuadrado con un patrón en el interior del lienzo FabricJS .

Están unidos mediante la transformación, de modo que cuando el círculo se escala, gira y mueve, el cuadrado se sincroniza y hace lo mismo (usando este tutorial ).

 bindObjects = (parent, child) => { var parentTransform = parent.calcTransformMatrix(); var invertedParentTransform = fabric.util.invertTransform(parentTransform); var desiredTransform = fabric.util.multiplyTransformMatrices(invertedParentTransform, child.calcTransformMatrix()); child.relationship = desiredTransform; } updateObjects = (parent, child) => { var newTransform = fabric.util.multiplyTransformMatrices( parent.calcTransformMatrix(), child.relationship); opt = fabric.util.qrDecompose(newTransform); child.set({ flipX: false, flipY: false, }); child.setPositionByOrigin( { x: opt.translateX, y: opt.translateY }, 'center', 'center' ); child.set(opt); child.setCoords(); } // Main flow of canvas & objects creations .... bindObjects(circle, square); circle.on('moving', (e) => { updateObjects(circle, square); }) circle.on('scaling', (e) => { updateObjects(circle, square); }) circle.on('rotating', (e) => { updateObjects(circle, square); })

Ahora quiero cambiar el enlace y unir el círculo solo con el patrón (que está dentro del cuadrado), por lo que escalar, rotar y mover solo lo afectará.

Todos mis intentos de cambiar entre el cuadrado y el patrón, staticCanvas o la imagen del patrón en sí no funcionaron o arrojaron un error de calcTransformMatrix no encontrado en el objeto secundario)

¿Hay alguna manera de lograrlo?