Question

我创建了一个织物自定义类“ VectorPlaceholder”，该类基本上是一个包含Rectangle和Vector的组：

// Fabric.js custom vector EPS object
fabric.VectorPlaceholder = fabric.util.createClass(fabric.Group, {
    async: true,
    type: 'vector-placeholder',
    lockUniScalingWithSkew: false,
    noScaleCache: true,


    initialize: function (options) {                

        boundsRectangle = new fabric.Rect({            
            strokeDashArray: [10,10],
            originX: 'center',
            originY: 'center',
            stroke: '#000000',
            strokeWidth: 1,
            width: options.width || 300,
            height: options.height || 300,
            fill: 'rgba(0, 0, 0, 0)',            
        });

        this.setControlsVisibility({            
            ml: false,
            mb: false,
            mr: false,
            mt: false,            
        });

        this.originX = 'center',
        this.originY = 'center',

        this.callSuper('initialize', [boundsRectangle], options);

    },

    setVector: function (vector) {        
        //We remove any EPS that was in that position
        var EPSGroup = this;
        EPSGroup.forEachObject(function (object) {
            if (object && object.type != "rect") {
                EPSGroup.remove(object);
            }
        });

        var scale = 1;        
        var xOffset = EPSGroup.getScaledWidth() / 2;
        var yOffset = EPSGroup.getScaledHeight() / 2;
        if (vector.height > vector.width) {            
            scale = EPSGroup.getScaledHeight() / vector.height;
            xOffset = xOffset - (EPSGroup.getScaledWidth() - vector.width * scale) / 2

        }
        else {
            scale = EPSGroup.getScaledWidth() / vector.width;
            yOffset = yOffset - (EPSGroup.getScaledHeight() - vector.height * scale) / 2

        }

        vector.left = EPSGroup.left - xOffset;
        vector.top = EPSGroup.top - yOffset;        
        vector.set('scaleY', scale);
        vector.set('scaleX', scale);
        var angle = 0;        
        if (EPSGroup.get('angle')) {
            angle = EPSGroup.get('angle');
            vector.setAngle(angle);                        
        }        
        EPSGroup.addWithUpdate(vector);
        EPSGroup.setCoords();      
    },

});

此类的想法是要有一个占位符，用户可以在其中上传SVG。这是通过调用fabric.loadSVGFromString并将结果传递到我的自定义类（setVector）中的函数来完成的

fabric.loadSVGFromString(svgString, function(objects, options) {
   // Group the SVG objects to make a single element
   var a = fabric.util.groupSVGElements(objects, options);
   var EPSGroup = new fabric.VectorPlaceholder({});
   EPSGroup.setVector(a);

当我创建我的自定义对象并且不旋转它时，它可以完美工作。如您所见，组控件与虚线矩形对齐。

问题是当我创建一个空的VectorPlaceholder并手动旋转它时。手动旋转后，调用setVector时会发生以下情况：

我不明白为什么组控件忽略了旋转，我做错了什么？如何使组控件的渲染与旋转的矩形对齐？

Answer 1

使用// Fabric.js custom vector EPS object fabric.VectorPlaceholder = fabric.util.createClass(fabric.Group, { async: true, type: 'vector-placeholder', lockUniScalingWithSkew: false, noScaleCache: true, initialize: function (options) { boundsRectangle = new fabric.Rect({ strokeDashArray: [10,10], originX: 'center', originY: 'center', stroke: '#000000', strokeWidth: 1, width: options.width || 300, height: options.height || 300, fill: 'rgba(0, 0, 0, 0)', }); this.setControlsVisibility({ ml: false, mb: false, mr: false, mt: false, }); this.originX = 'center', this.originY = 'center', this.callSuper('initialize', [boundsRectangle], options); }, setVector: function (vector) { //We remove any EPS that was in that position var EPSGroup = this; EPSGroup.forEachObject(function (object) { if (object && object.type != "rect") { EPSGroup.remove(object); } }); var scale = 1; var xOffset = EPSGroup.getScaledWidth() / 2; var yOffset = EPSGroup.getScaledHeight() / 2; if (vector.height > vector.width) { scale = EPSGroup.getScaledHeight() / vector.height; xOffset = xOffset - (EPSGroup.getScaledWidth() - vector.width * scale) / 2 } else { scale = EPSGroup.getScaledWidth() / vector.width; yOffset = yOffset - (EPSGroup.getScaledHeight() - vector.height * scale) / 2 } vector.left = EPSGroup.left - xOffset; vector.top = EPSGroup.top - yOffset; vector.set('scaleY', scale); vector.set('scaleX', scale); /*var angle = 0; if (EPSGroup.get('angle')) { angle = EPSGroup.get('angle'); vector.setAngle(angle); } */ EPSGroup.addWithUpdate(vector); EPSGroup.setCoords(); }, }); canvas = new fabric.Canvas('c', { }); fabric.loadSVGFromString('<svg height="210" width="500"><polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" /></svg>', function(objects, options) { // Group the SVG objects to make a single element var a = fabric.util.groupSVGElements(objects, options); var EPSGroup = new fabric.VectorPlaceholder({}); EPSGroup.left=200; EPSGroup.top=200; EPSGroup.setVector(a); EPSGroup.angle=45; canvas.add(EPSGroup); })方法后，需要设置角度 http://jsfiddle.net/2segrwx0/1/

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.5/fabric.js"></script>
<canvas id="c" width=500 height=300 ></canvas>

var net = require('net');
var sockets = [];

var svr = net.createServer(function(sock) {
    console.log('Connected: ' + sock.remoteAddress + ':' + sock.remotePort);
    sockets.push(sock);

    sock.write('Welcome to the server!\n');

    sock.on('data', function(data) {
        for (var i=0; i<sockets.length ; i++) {
            if (sockets[i] != sock) {
                if (sockets[i]) {
                    sockets[i].write(data);
                }
            }
        }
    });

    sock.on('end', function() {
        console.log('Disconnected: ' + sock.remoteAddress + ':' + sock.remotePort);
        var idx = sockets.indexOf(sock);
        if (idx != -1) {
            delete sockets[idx];
        }
    });
});

var svraddr = '192.168.0.8';
var svrport = 1234;

svr.listen(svrport, svraddr);
console.log('Server Created at ' + svraddr + ':' + svrport + '\n');

旋转fabric.js时，组控件偏移

1 个答案: