主页 / 问题 / 589612
Accepted
Rennorb
Asked:2020-11-11 03:51:45 +0000 UTC2020-11-11 03:51:45 +0000 UTC

在画布上重绘 svg

  • 772

你好！有一个任务 - 绘制和下载 svg，这样的结构

<svg id="canv" style="width: 220px; height: 220px;">       
  <g id="grid">
    <line x1="22" y1="0" x2="22" y2="220" stroke="black"></line>
    <line x1="44" y1="0" x2="44" y2="220" stroke="black"></line>
    <line x1="66" y1="0" x2="66" y2="220" stroke="black"></line>
    <line x1="88" y1="0" x2="88" y2="220" stroke="black"></line>
    <line x1="110" y1="0" x2="110" y2="220" stroke="black"></line>
    <line x1="132" y1="0" x2="132" y2="220" stroke="black"></line>
    <line x1="154" y1="0" x2="154" y2="220" stroke="black"></line>
    <line x1="176" y1="0" x2="176" y2="220" stroke="black"></line>
    <line x1="198" y1="0" x2="198" y2="220" stroke="black"></line>
    <line x1="0" y1="22" x2="220" y2="22" stroke="black"></line>
    <line x1="0" y1="44" x2="220" y2="44" stroke="black"></line>
    <line x1="0" y1="66" x2="220" y2="66" stroke="black"></line>
    <line x1="0" y1="88" x2="220" y2="88" stroke="black"></line>
    <line x1="0" y1="110" x2="220" y2="110" stroke="black"></line>
    <line x1="0" y1="132" x2="220" y2="132" stroke="black"></line>
    <line x1="0" y1="154" x2="220" y2="154" stroke="black"></line>
    <line x1="0" y1="176" x2="220" y2="176" stroke="black"></line>
    <line x1="0" y1="198" x2="220" y2="198" stroke="black"></line>
  </g>

  <line x1="165" y1="187" x2="121" y2="33" stroke="black"></line>
  <line x1="121" y1="33" x2="187" y2="55" stroke="black"></line>
  <line x1="187" y1="55" x2="99" y2="165" stroke="black"></line>
  <line x1="99" y1="165" x2="165" y2="187" stroke="black"></line>
</svg>

（组内有几行，组grid外有几行，颜色可以任意）

为此，我编写了以下代码：

function download()
{
  var temp = document.createElement('canvas');

  temp.style.width = canvas.width*cellSize;
  temp.style.height = canvas.height*cellSize;

  var ctx = temp.getContext('2d');

  for(var i=0; i<canv.getElementById('grid').children.length; i++)
  {
    var el = canv.getElementById('grid').children[i];
    console.log(el);

    ctx.strokeStyle = el.getAttribute('stroke');

    var x1 = el.getAttribute('x1'),
        x2 = el.getAttribute('x2'),
        y1 = el.getAttribute('y1'),
        y2 = el.getAttribute('y2');


    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.stroke();
  }

  for(var i=1; i<canv.children.length; i++)
  {
    var el = canv.children[i];
    console.log(el);
    ctx.strokeStyle = el.getAttribute('stroke');

    var x1 = el.getAttribute('x1'),
        x2 = el.getAttribute('x2'),
        y1 = el.getAttribute('y1'),
        y2 = el.getAttribute('y2');


    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.stroke();
  }

  document.body.appendChild(temp);

  var link = document.createElement('a');
  link.setAttribute('download', '');
  link.setAttribute('href', temp.toDataURL());
  link.click();
}

结果，下载了以下图像：

在此处输入图像描述

链接到 Jsfiddle（你需要点击图片）。

请帮我修一下。

javascript

3 个回答

  1. 下午好！我认为你给自己找了麻烦。这个问题可以通过两种方式解决：

    1. 下载svg格式的图片。可以在这里查看：https ://stackoverflow.com/questions/2483919/how-to-save-svg-canvas-to-local-filesystem 在答案中有一个解决方案应该可以在没有服务器的情况下工作。

    2. 下载png格式的图片。这将需要 canvg 库： 

      var canvas = document.createElement('canvas');
var svg = document.getElementById('canv');
var svgWider = svg.innerHTML;
canvg(canvas, svgWider);
// Ваш код, который скачивает canvas как png файл.
    • 3
  2. Best Answer

    事实上，默认的画布大小是 150x300

    删除

    temp.style.width = canvas.width*cellSize;
temp.style.height = canvas.height*cellSize;

    之后

    var ctx = temp.getContext('2d');

    添加

    ctx.canvas.height = canvas.height * cellSize;
ctx.canvas.width = canvas.width * cellSize;

    jsFiddle

    • 2
    1. width谁来指定 canvas和heightsvg的属性？
    2. 对于 svg 最好指定viewBox而不是widthand height。
    3. svg 图像有什么问题？
    • -2

相关问题