在fabric js画布上旋转图像的角度是多少？

Question

我正在开发一个基于Fabric.js的项目，尝试打印旋转角度...。

使用Fabric.js的函数getAngle()可以获取角度，但如何将其打印在屏幕上呢？作为一张图片？

有一个网站printio.ru/classic_tees/new（fabric.js库的创始人网站）是一个T恤印刷网站。通过点击图像选项上传任何图像，然后您可以将该图像放置在任何位置，并且在旋转图像时，旋转的角度也将被打印出来。

提前致谢。

- Anurag Singh

---

你说的“As in image”是什么意思？你想把它添加到织物画布中吗？为什么需要做成图像的形式呢？请更详细地描述问题。 - Jason Maggard

我上传了两张图片，关于这个问题...希望你能理解问题。 - Anurag Singh

你有一些代码、JSFiddle或其他东西吗？ - Mr. Polywhirl

我在下面加入了一些向量逻辑。 - Mr. Polywhirl

Answer 1

我知道这还不完整，但至少是一个开始。目前我没有太多时间，但我可以获取对象的中心：

( obj.left + obj.width / 2 , obj.top + obj.height / 2 )

然后，使用从中心到旋转手柄的矢量获取悬停提示的极坐标。

JSFiddle上的演示

编辑: 以下代码已从我的原始提交进行了更新。我增加了矢量逻辑以根据旋转角度平移文本。我保留了原始内容以防任何人感兴趣。

var imgSrc = 'http://placehold.it/500x300/322F37/E9EBFF.png&text=Image';
var showLine = true;

(function () {
    fitToContainer(document.querySelector('canvas#c'));

    var canvas = this.__canvas = new fabric.Canvas('c');
    
    fabric.Object.prototype.transparentCorners = false;

    // Image - An image to rotate.
    fabric.Image.fromURL(imgSrc, function (img) {
        img.scale(0.5).set({
            left: 100,
            top: 100,
            lockScalingX : true,
            lockScalingY : true,
            lockMovementX : true,
            lockMovementY : true
        });
        canvas.add(img).setActiveObject(img);
        img.moveTo(0);
    });
    
    // Line - Shows distance from center of object to text
    var line = new fabric.Line([0, 0, 0, 0], {
        stroke: 'red'
    });
    canvas.add(line);
    line.moveTo(1);
    
    // Text - Shows current rotation
    var text = new fabric.Text('0.00°', {
        top: 30,
        left: 210,
        fontSize : 20,
        fill : '#222',
        evented: false
    });
    canvas.add(text);
    text.moveTo(2);
    
    canvas.on({
        'object:rotating': function(e) {
            handleUpdate(e.target, text, line);
        }
    });
})();

// Canvas setup function
function fitToContainer(canvas) {
    canvas.style.width = '100%';
    canvas.style.height = '100%';
    canvas.width = canvas.offsetWidth;
    canvas.height = canvas.offsetHeight;
}

// Vector functions
function v_vector(x, y) {
    return { x : x, y : y }
}
function v_vector2(mag, dir) {
    return v_vector(mag * Math.sin(dir), mag * Math.cos(dir));
}
function v_add(v1, v2) {
    return v_vector(v1.x + v2.x, v1.y + v2.y);
}
function v_scale(v, s) {
    return v_vector(v.x * s, v.y * s);
}
function v_displace(point, angle, distance) {
    return v_add(point, v_vector2(distance, angle));
}

// Fabric.js functions
function getLocation(obj) {
    return v_vector(obj.left,obj.top);
}
function setLocation(obj, dispacement) {
    obj.left = dispacement.x;
    obj.top = dispacement.y;
}
function isImage(obj) {
    return obj['getElement'] && obj.getElement().className === 'canvas-img';
}
function handleUpdate(obj, text, line) {
    if (isImage(obj)) {
        updateAngleText(obj, text, line);
    }
}
function updateAngleText(obj, text, line) {
    var angle = obj.getAngle() % 360;
    
    text.text = angle.toFixed(2) + '°';
    
    var centerPoint = getLocation(obj);
    var antiAngle = -angle * Math.PI / 180;
    var distanceToTop = obj.height * obj.scaleY / 2;
    var textOffset = 80;
    var distance = -1 * (distanceToTop + textOffset);
    var displacement = v_displace(centerPoint, antiAngle, distance);
    
    if (showLine) {
        updateLine(line, centerPoint, displacement);
    }
    
    var textDimensions = v_vector(text.width, text.height);
    var textLocation = v_add(displacement, v_scale(textDimensions, -0.5));    
    setLocation(text, textLocation);
}
function updateLine(line, centerPoint, displacement) {
    line.x1 = centerPoint.x;
    line.y1 = centerPoint.y;
    line.x2 = displacement.x;
    line.y2 = displacement.y;
    
    line.width = Math.abs(line.x1 - line.x2);
    line.height = Math.abs(line.y1 - line.y2);
    line.left = line.x1 < line.x2 ? line.x1 : line.x2;
    line.top = line.y1 < line.y2 ? line.y1 : line.y2;
}

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script>
<canvas id="c" width="800" height="600"></canvas>

原始代码

var imgSrc = 'http://placehold.it/500x300/322F37/E9EBFF.png&text=SUV';
    
    function fitToContainer(canvas) {
        canvas.style.width = '100%';
        canvas.style.height = '100%';
        canvas.width = canvas.offsetWidth;
        canvas.height = canvas.offsetHeight;
    }
    
    function isImage(obj) {
        return obj['getElement'] && obj.getElement().className === 'canvas-img';
    }
    
    function updateAngleText(obj, text) {
        var rotHandlePos = obj.oCoords.mt;
        var angle = (obj.getAngle() % 360).toFixed(2);
        text.text = 'Angle: ' + angle + '°';
        text.top = rotHandlePos.y;
        text.left = rotHandlePos.x - text.width / 2;        
    }
    
    (function () {
        fitToContainer(document.querySelector('canvas#c'));
    
        var canvas = this.__canvas = new fabric.Canvas('c');    
        fabric.Object.prototype.transparentCorners = false;
    
        // Image
        fabric.Image.fromURL(imgSrc, function (img) {
            img.scale(0.5).set({
                left: 100,
                top: 100
            });
            canvas.add(img).setActiveObject(img);
            img.moveTo(0);
        });
        
        
        // Text
        var text = new fabric.Text('Angle: 0.00°', {
            top: 50,
            left: 100,
            fontSize : 16,
            fill : '#FFFFFF',
            backgroundColor : '#112244',
            lockRotation : true,
            lockScalingX : true,
            lockScalingY : true,
            lockMovementX : true,
            lockMovementY : true
        });
        canvas.add(text);
        text.moveTo(1);
        
        canvas.on({
            'object:rotating': function(e) {
                var obj = e.target;
                if (isImage(obj)) {
                    updateAngleText(obj, text);
                }
            },
            'object:moving': function(e) {
                var obj = e.target;
                if (isImage(obj)) {
                    updateAngleText(obj, text);
                }
            }
        });
    })();

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script>
<canvas id="c" width="800" height="600"></canvas>

- Mr. Polywhirl

---

非常感谢你，伙计...这正是我想要的...再次感谢。 - Anurag Singh

@AnuragSingh：我让这段代码更加棒了。我添加了一行来展示文本的位移。我还纠正了文本位置，以平滑旋转。 - Mr. Polywhirl

@Mr.Polywhirl：惊人的解决方案 :) - Abhinav

你能指向任何教程，让我学习关于这些矢量运动的知识吗？ - Abhinav

Answer 2

也许你可以使用 fabric.Text。你可以在http://fabricjs.com/patterns/看到一个例子。

例如：

var text = new fabric.Text('Honey,\nI\'m subtle', 
    {
        fontSize: 250,
        left: 50,
        top: 0,
        lineHeight: 1,
        originX: 'left',
        fontFamily: 'Helvetica',
        fontWeight: 'bold'   
    });   

canvas.add(text);

我已经为您创建了一个fiddle：http://jsfiddle.net/johnboker/sfu5w9ng/3/

- John Boker