Fabric.js - 旋转更改对象的位置

时间:2017-09-11 15:08:42

标签: rotation position fabricjs

我会在FabricJS画布上旋转一个对象,但是当我旋转时,它的位置会发生变化。我不能使用中心原点,只是左/上,因为我将坐标保存到数据库参考左/上位置。

你能帮帮我吗?有什么想法吗?

以下是示例。

由于

...
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0);
curl_exec($curl);
var canvas = window._canvas = new fabric.Canvas('c');

canvas.add(new fabric.Triangle({
    width: 100,
    height: 100,
    left: 0,
    top: 0,
    angle: 0,
    fill: '#00AC6B'
}));

function rotateObject(angleOffset) {
    var obj = canvas.getActiveObject();

    if (!obj) return;

    var angle = obj.getAngle() + angleOffset;

    angle = angle > 360 ? 90 : angle < 0 ? 270 : angle;

    obj.setAngle(angle).setCoords();

    canvas.renderAll();
    
    document.getElementById('log').innerHTML += 'Left: ' + obj.left + ', top: ' + obj.top + '<br>';
}

fabric.util.addListener(document.getElementById('rotate-left'), 'click', function () {
    rotateObject(-90);
});
fabric.util.addListener(document.getElementById('rotate-right'), 'click', function () {
    rotateObject(90);
});
canvas {
    border: 1px solid #999;
}
.log {
  height: 220px;
  overflow: auto;
  border: 1px solid #999;
  padding: 5px;
  margin-top: 10px;
}

0 个答案:

没有答案