使HTML Canvas生成可用于PDF的艺术线条吗? [英] Make HTML Canvas generate PDF-ready Line art?

问题描述

我有一个使用HTML5画布生成漂亮图形的HTML/JavaScript程序:

I have an HTML/JavaScript program that uses the HTML5 canvas to generate a pretty graph:

我想将此图包含在我用LaTeX制作的书中.不幸的是，当我将该页面打印为PDF时，会得到一个位图-大概是因为canvas是位图.

I want to include this graph in a book that I'm producing with LaTeX. Unfortunately, when I print this page to PDF, I get a bitmap—presumably because canvas is a bitmap.

我刚刚检查了一下，显然如果我是用SVG而不是HTML5 canvas开发的，那将是一件好事.但是我没有.因此，有什么方法可以从HTML5 Canvas生成线条图，还是我应该硬着头皮将其重新实现为SVG?

I just checked and apparently if I had developed this with SVG instead of with HTML5 canvas I would be good to go. But I didn't. So is there any way to generate line art from HTML5 Canvas, or should I just bite the bullet and re-implement this as SVG?

(我使用canvas而不是svg，因为我认为Canvas是首选，更现代且更高效的工具.我误会了吗?)

(I used canvas instead of svg because I thought that Canvas was preferred, more-modern, and more efficient. Was I mistaken?)

这是我的JavaScript，用于绘制每个箭头.我相信我可以使用 svg.js

Here is my JavaScript for drawing each arrow. I believe that I can readily port this to SVG using svg.js

    /* 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();

    }

推荐答案

以下是生成SVG的代码，该SVG再现了您在问题中给出的旋转后的片段.方法是 drawRotatedPiece(x，y，radius，angle).

The following is code that generates SVG that reproduces the rotated piece you have given in your question. The method is 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格式的任何其他图形(尤其是像您这样的简单图形，它们只是一堆笔触和填充的路径)，请在

In case you need to generate any other graphics in SVG format (especially simple graphics like yours that are just a bunch of stroked and filled paths), my note on the Essentials of SVG may help you translate those graphics to SVG.

这篇关于使HTML Canvas生成可用于PDF的艺术线条吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！