Question

正如标题所说我试图通过使用fabric.js（fabricjs.com）来做一些等轴测视图。

我有一个转换矩阵，用于将静态对象转换为等距（轴测）视图，看起来像[0.87，-0.48,0.87,0.48,0,0]，这非常有效。但现在我想将移动的物体转换成这个视图，这就是我无法解决的问题。

在此，尽可能简单，fiddle你可以看到我正在尝试的东西。

小提琴的一些词语：

背景中的矩形是一个静态对象，它具有上面显示的变换矩阵。该对象应该只是转换的控制对象。

在这种情况下，圆圈将保持原样，并将用作该线的“锚点”。

三角形是我无法改变的问题对象。

如果按“变换三角形”，上面的矩阵将应用于三角形，而在“右上角”位置，它看起来很好。现在，如果按“Position2”，三角形将重新定位，您将看到该位置的转换矩阵是错误的。

我现在正试图找到一个解决方案，用于转换三角形的位置。

在这个fiddle中，你会发现画布上没有布料的旋转三角形。

但是我无法找到将其应用于织物中的对象的方法。

提前感谢您回答或推动我朝着正确的方向前进。

很抱歉，如果我违反任何关于发布的规则，但这是我第一次上SO。如果我违反任何规则，请说一下我需要改变的内容。谢谢第一小提琴的代码

 //isometric arrow
canvas = new fabric.Canvas('c');

    var rect = new fabric.Rect({
         left: canvas.getWidth()/4
        ,top: canvas.getHeight()/4
        ,originX: 'left'
        ,originY: 'top'
        ,width: canvas.getWidth()/2
        ,height: canvas.getHeight()/2
        ,name:'testRect'
        ,fill: 'rgba(255,0,0,0.2)'
    ,selectable: false
    ,transformMatrix: [0.87415728, -0.48564293, 0.87415728, 0.48564293, 0, 0]
    });
  var circle = new fabric.Circle({
     radius: 10
    ,name: 'startCircle'
    ,stroke: 'blue'
    ,strokeWidth: 2
    ,fill: 'blue'
        ,left: canvas.getWidth()/4
        ,top: canvas.getHeight()/2
    ,originX: 'center'
    ,originY: 'center'
    ,angle: 0
    ,startAngle: 0 * (Math.PI / 180)
    ,endAngle: 360 * (Math.PI / 180)
    ,transformMatrix: [0.87415728, -0.48564293, 0.87415728, 0.48564293, 0, 0]
  });
  var triangle = new fabric.Triangle({
     left: 390
    ,top: 170
    ,name: 'triAngle'
    ,width: 150
    ,height: 150
    ,selectable: true
    ,originX: 'center'
    ,originY: 'center'
    ,angle: 0
    ,centeredRotation: false
    //,transformMatrix: [0.87415728, -0.48564293, 0.87415728, 0.48564293, 0, 0]
  });
  var line = new fabric.Line([circle.left, circle.top, triangle.left, triangle.top], {
     name: 'theLine'
    ,fill: 'blue'
    ,stroke: 'blue'
    ,originX: 'center'
    ,originY: 'center'
    ,selectable: false
    ,groupSelection: false
  });
    canvas.add(rect, circle, triangle, line);
  triangle.set({'angle':checkAngle(circle, triangle)});
    canvas.renderAll();

  triangle.on('moving', function(){
    canvas.item(2).set({'angle':checkAngle(canvas.item(1), canvas.item(2))});
    canvas.item(3).set({
        'x2':this.getLeft(),
      'y2':this.getTop()
    });
  });

  function checkAngle(circle, triangle){
        var p1 = { x: circle.left, y: circle.top };
      var p2 = { x: triangle.left, y: triangle.top };
      if(triangle.transformMatrix){
        return (Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180 / Math.PI)
      } else {
        return (Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180 / Math.PI)+90;
      }      
  }

  $("#transformTriangle").on("click",function(){
    canvas.item(2).set({
      transformMatrix: [0.87415728, -0.48564293, 0.87415728, 0.48564293, 0, 0]
    });
    canvas.item(2).set({
      angle: checkAngle(canvas.item(1), canvas.item(2))
    });
    canvas.renderAll();
  });

  $("#pos2").on("click",function(){
    canvas.item(2).set({
        left: 410,
      top: 464,
      angle: checkAngle(canvas.item(1), canvas.item(2))
    });
    canvas.item(2).setCoords();
    canvas.item(2).fire('moving');
    canvas.renderAll();
  });

等距变换矩阵html5 / fabric js

0 个答案: