No estoy seguro de haber titulado esta pregunta correctamente, pero estoy creando un grupo a partir de un SVG y necesito que parezca que está encima de un cuadro isométrico. Así que necesito rotarlo 45 grados y luego reducir su altura.

El problema es que después de girarlo, cambiar la altura seguirá cambiando el eje Y original (girado) del grupo.

Aquí hay una explicación visual ...

enter image description here

Aquí está el código relevante que estoy usando ...

fabric.loadSVGFromURL(patternURL, function (svgpattern) {

    var ptnGroup = new fabric.Group(svgpattern, {
      top: 0,
      left: 0,
      width: 500,
      height: 500,
      angle: 45
    });

    ptnGroup.scaleY = .3;
    canvas.add(ptnGroup);
}
0
Serks 13 ene. 2017 a las 06:58

1 respuesta

La mejor respuesta

El problema es que la escala se aplica antes de la rotación. Para forzar que suceda la escala después de la rotación, puede envolver ptnGroup en otro grupo y aplicar la escala al grupo exterior:

fabric.loadSVGFromURL(patternURL, function (svgpattern) {

  var ptnGroup = new fabric.Group(svgpattern, {
    top: 0,
    left: 0,
    width: 500,
    height: 500,
    angle: 45
  });

  var scaleGroup = new fabric.Group([ ptnGroup ], {
    scaleY: 0.3
  });
  canvas.add(scaleGroup);
}

Alternativamente, puede usar una matriz de transformación con las transformaciones de rotación y escala multiplicadas en el orden correcto:

fabric.loadSVGFromURL(patternURL, function (svgpattern) {

  var ptnGroup = new fabric.Group(svgpattern, {
    top: 0,
    left: 0,
    width: 500,
    height: 500
  });

  ptnGroup.transformMatrix = [0.707, 0.212, -0.707, 0.212, 0, 0];
  canvas.add(ptnGroup);
}

Aquí, 0,707 proviene de cos(45°) y 0,212 es cos(45°) * 0.3.

1
Peter Collingridge 13 ene. 2017 a las 13:39
Envolver al grupo con otro grupo funcionó. Lo curioso es que probé esto yo mismo antes de hacer esta pregunta, pero no funcionó porque me perdí los corchetes alrededor de ptnGroup. Gracias Peter.
 – 
Serks
13 ene. 2017 a las 14:40