使 HTML Canvas 生成 PDF 就绪的艺术线条？

Question

我有一个 HTML/JavaScript 程序，它使用 HTML5 canvas 生成漂亮的图表：

我想将此图表包含在我使用 LaTeX 制作的一本书中。不幸的是，当我将此页面打印为 PDF 时，我得到了一个位图——大概是因为 canvas 是一个位图。

我刚刚检查了一下，显然如果我是用 SVG 而不是 HTML5 canvas 开发的，我就可以开始了。但我没有。那么有什么方法可以从 HTML5 Canvas 生成艺术线条，还是我应该硬着头皮将其重新实现为 SVG？

（我使用 canvas 而不是 svg 因为我认为 Canvas 更受欢迎，更现代，更高效。我错了吗？）

编辑：这是我绘制每个箭头的 JavaScript。我相信我可以使用 svg.js

轻松地将其移植到 SVG

    /* Draw a Piece at its rotation at the position row,col */
    drawRotatedPiece(p) {
        let x = this.x(p.col);
        let y = this.y(p.row);
        this.ctx.beginPath();
        this.ctx.save();
        this.ctx.translate( x, y);
        this.ctx.fillStyle='white';
        this.ctx.fillRect( -this.radius, -this.radius, this.radius*2, this.radius*2 );
        this.ctx.rotate( p.angle * Math.PI / 180);
        this.ctx.moveTo( 0, -this.radius );
        this.ctx.lineTo( -this.radius, 0 );
        this.ctx.lineTo( +this.radius, 0 );
        this.ctx.closePath( );
        this.ctx.fillStyle='black';
        this.ctx.fill();
        this.ctx.fillRect( -this.radius/2.0, 0, this.radius, this.radius*2/3.0 );
        this.ctx.restore();

    }

Answer 1

以下是生成 SVG 的代码，可重现您在问题中给出的旋转部分。方法是drawRotatedPiece(x, y, radius, angle).

// Generate a SVG path command
function xycmd(cmd,x,y){
 return cmd+ x + " " + y;
}

function rectpathxy(x,y,w,h){
   return xycmd("M", x, y) +
          xycmd("L", x+w, y) +
          xycmd("L", x+w, y+h) +
          xycmd("L", x, y+h) +
          "Z";
}

function drawRotatedPiece(x, y, radius, angle){
  trans=[];
  svg="";
  svg+="<path style='stroke:red;fill:white'";
  svg+=" transform='translate("+x+","+y+")'";
  svg+=" d='";
  svg+=rectpathxy(-radius, -radius, radius*2, radius*2);
  svg+="'/>";
  svg+="<path style='stroke:none;fill:black'";
  svg+=" transform='translate("+x+","+y+") rotate("+angle+")'";
  svg+=" d='";
  var w=radius;
  var h=radius*2/3.0;
  svg+= xycmd("M", 0, -radius) +
        xycmd("L", -radius, 0) +
        xycmd("L", +radius, 0) +
        "Z" +
        xycmd("M", x,     y) +
        xycmd("L", x+w,   y) +
        xycmd("L", x+w, y+h) +
        xycmd("L", x,   y+h) +
        "Z";
  svg+="'/>";
  return svg;
}

如果您需要生成任何其他 SVG 格式的图形（尤其是像您这样的简单图形，只是一堆描边和填充路径），我在 Essentials of SVG 上的注释可能会帮助您翻译这些图形到 SVG。

使 HTML Canvas 生成 PDF 就绪的艺术线条？

Make HTML Canvas generate PDF-ready Line art?

javascript

svg

canvas

html5-canvas

svg.js