0

FabricJS と NodeJS を使用して SVG パスをレンダリングします。a を設定するstrokeとstrokeSize、ストロークが表示されませんでした。長方形でテストしたところ、うまくいきました。私のコード:

var fabric = require('fabric').fabric,
    http   = require('http'),
    url    = require('url'),
    PORT   = 9099;

    var server = http.createServer(function (request, response) {
    var params = url.parse(request.url, true);
    var canvas = fabric.createCanvasForNode(400, 600);

    response.writeHead(200, { 'Content-Type': 'image/png' });

    canvas.backgroundColor = "blue";
    fabric.loadSVGFromURL('http://localhost/test/html5/fabric/img/animal1.svg', function(ob,op){
        var element = new fabric.PathGroup(ob, op);
        element.set({
        top:         100,
        left:        100,
        scaleX:      6,
        scaleY:      6,
        fill:        '#ddd',
        strokeWidth: 5,
        stroke:      '#555'
        });
        canvas.add(element);

        var rect = new fabric.Rect({
           left:            300,
           top:             100,
           width:           100,
           height:          100,
           fill:            '#ddd',
           strokeWidth:     3,
           strokeDashArray: [10, 5],
           stroke:          '#555'
        });
        canvas.add(rect);

        canvas.renderAll();

        var stream = canvas.createPNGStream();
        stream.on('data', function(chunk) {
            response.write(chunk);
        });
        stream.on('end', function() {
            response.end();
        });

    });
});

server.listen(PORT);
4

1 に答える 1

0

これを試して：

fabric.loadSVGFromURL('http://localhost/test/html5/fabric/img/animal1.svg', function(objects,options){
    var element = fabric.util.groupSVGElements(objects, options);
    element.set({
    top:         100,
    left:        100,
    scaleX:      6,
    scaleY:      6,
    fill:        '#ddd',
    strokeWidth: 5,
    stroke:      '#555'
    });
    canvas.add(element).renderAll();
于 2013-11-11T04:57:11.053 に答える