角度图像的写入量在织物js画布上旋转

Question

我正在进行Fabric.js项目，我正在尝试打印旋转角度....

使用Fabric.js的功能getAngle()。我可以获得角度，但如何在屏幕上打印？ ..是一个图像

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

Answer 1

我知道它不完整，但至少它是一个开始。我现在没有时间，但我会得到对象的中心：

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

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

Demo @ JSFiddle

修改：以下代码从我原来的提交中更新。我添加了矢量逻辑来根据旋转角度翻译文本。如果有人有兴趣，我保持原件完好无损。

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

原始代码

＆＃13;

＆＃13;

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);
                }
            }
        });
    })();

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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);

我继续为你创造了一个小提琴：http://jsfiddle.net/johnboker/sfu5w9ng/3/