代码之家  ›  专栏  ›  技术社区  ›  Nithin A

画布轴线的厚度正在增加

  •  2
  • Nithin A  · 技术社区  · 11 年前

    我正在使用html5画布将svg(条形图)转换为画布,然后转换为图像。但是,在转换x轴和y轴线的厚度时,会增加。

    这是我的密码

    var html = d3.select(
                        '#div2 #' + $scope.selectedoption + ' svg')
                        .attr("version", 1.1).attr("xmlns",
                                "http://www.w3.org/2000/svg")
                        .node().parentNode.innerHTML;
    
                // d3.select("#mycanvas").style("display", "none");
    
                var canvasval = document.getElementById('mycanvas');
    
                if (canvasval != null)
                    document.getElementById('mycanvas').remove();
    
    
                var newcanvas = document.createElement('canvas');
                newcanvas.setAttribute('id', "mycanvas");
                newcanvas.setAttribute('width', "900");
                newcanvas.setAttribute('height', "900");
    
    
    
                var olddiv = document.getElementById('drawcanvas');
                olddiv.appendChild(newcanvas);
    
                // console.log(document.getElementById('mycanvas'))
                var canvas = document.getElementById("mycanvas"), context = canvas
                        .getContext("2d");
    
    
                // build the query selector for the desired canvas
    
    
    
                context.lineWidth = 0.0;
    
    
                var DOMURL = window.URL;
    
                var img = new Image();
                var svg = new Blob([ html ], {
                    type : 'image/svg+xml;base64;charset=UTF-8;'
                });
                var url = DOMURL.createObjectURL(svg);
    
                img.onload = function() {
                    context.drawImage(img, 0,0);
                    DOMURL.revokeObjectURL(url);
                }
    
                img.src = url;
                img.Timeout=0;
    
                var flag = 0;
    
                /*
                 * var olddiv =
                 * document.getElementById('drawcanvas');
                 * olddiv.appendChild(newcanvas);
                 */
    
                // $scope.hidevalue=false;
            }
            html2canvas(
                    document.getElementById(canvaseleid),
                    {
                        onrendered : function(canvas) {
                            var imgData = canvas
                                    .toDataURL('image/png');
    
                            var a = document.createElement("a");
                            a.download = "rept.png";
                            a.href = imgData;
    })
    

    我想不出原因。我也尝试过设置几个css属性。

    谢谢

    1 回复  |  直到 11 年前
        1
  •  1
  •   potatopeelings    11 年前

    您需要将轴的填充设置为透明(您看到的粗线实际上是填充)。您需要添加笔划颜色(以显示线条)

    您必须在内联CSS中执行此操作-您可以使用d3将这些样式添加到中,就像这样(在SVG中绘制图表之后,在调用html2canvas之前)

    d3.selectAll(".domain")
        .style("stroke", "black")
        .style("fill", "transparent");
    
    推荐文章