在 fabric js 上写入角度图像旋转量 canvas

Question

我正在做一个 Fabric.js 项目，我正在尝试打印旋转角度的数量....

使用 Fabric.js 的函数 getAngle()。我可以得到角度，但如何在屏幕上打印它？ ..作为图像

有网站 printio.ru/classic_tees/new（fabric.js 图书馆的创始人网站）..这是一个 T 恤打印网站...通过单击图像选项上传任何图像，然后您可以定位该图像无论你想要什么图像和旋转该图像，图像旋转的角度量也将被打印...... 提前致谢

Answer 1

也许你可以使用 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/

Answer 2

我知道这还不完整，但至少是一个开始。我现在真的没有时间，但我会得到物体的中心：

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

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

Demo @ 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>

在 fabric js 上写入角度图像旋转量 canvas

Write amount of angle image rotates on fabric js canvas

canvas

fabricjs

原代码