Question

我们正在尝试将使用D3js创建的图形创建的svg导入FabricJS全屏画布。

使用以下代码生成图表：

var  w = 600;
var  h = 400;
var margin = 40;
var dataLength = 10;

var rmdObj = function() { return {r:R(100), value:R(100)} };
var rmdData = createData.curry(rmdObj);
var data1 = rmdData(dataLength);    
var data2 = rmdData(dataLength);    


var svg = d3.select('#elsvg');
var group = svg.append('g')
    .attr("transform", "translate (" + [ 10, 0 ] + ")" );

var xScale = d3.scale.linear().domain( [0, dataLength] ).range( [margin, w-margin] );   
var yScale = d3.scale.linear().domain( [0, d3.max( data1.concat(data2), F('value') ) ] ).range( [h-margin, margin] )    

var valueLine = d3.svg.line()
    .x(function(d, i){ return xScale(i) })
    .y(function(d){ return yScale(d.value)});

var xAxisStyle = d3.svg.axis().scale(xScale).orient('bottom').ticks(5);
var xAxis = group.append('g').attr({
    'class': 'x axis',
    'transform': 'translate (' + [0, h-margin] + ')'
    })
    .call(xAxisStyle);

var yAxisStyle = d3.svg.axis().scale(yScale).orient('left').ticks(5);
var yAxis = group.append('g').attr({
    'class': 'y axis',
    'transform': 'translate (' + [margin, 0] + ')'
    })
    .call(yAxisStyle);


var line1 = group.append('path')
    .attr({
        class:'line1',
        d:valueLine(data1),
        fill:'none',
        stroke: 'blue',
        'stroke-width': 3
    })

var line1 = group.append('path')
    .attr({
        class:'line2',
        d:valueLine(data2),
        fill:'none',
        stroke: 'red',
        'stroke-width': 3
    })

结果在svg：

Result in svg！

但是当我在面料的画布上导入svg（高于svg大小）时，结果是：

var SVGstring = document.getElementById('ghostLayer').innerHTML;  //SVG取得

console.log(SVGstring);

fabric.loadSVGFromString(SVGstring , function(objects, options) {

    console.log(options);

    options.top = 0;
    options.left = 0;
    options.width = 600;
    options.height = 400;
    options.selection = true;

    var svgGroups = fabric.util.groupSVGElements(objects, options);

    //onsole.log(JSON.stringify(svgGroups))
    self.Bbcanvas.add(svgGroups).renderAll();   

});

Result when it's imported to canvas！

单击按钮时会生成svg，然后导入svg画布。有没有办法保持svg的正确结构或调整线条？

谢谢！

如何将3Djs图形正确导入FabricJS画布

0 个答案: