将地图转换为PDF并打开PDF查看器。

huangapple go评论87阅读模式
英文:

Convert Maps to PDF and open PDF Viewer

问题

我试图将地图与一些标题文本转换。标题保持与地图重叠,而不是位于标题上方并在标题下方显示地图。我想在旁边添加一个日志和标题,并在标题下方显示地图,有人可以帮助吗?我正在使用open layers版本7.2.2来导出使用jsPDF并使用CanvasRenderingContext2D创建画布。

这是我尝试实现相同输出的POC:- 导出为PDF

英文:

I am trying to convert the map with some header text. The header keeps overlapping on the map instead of being above header and displaying the map below. I want to add a log and header besides it and display the map below the header can someone help. I am using open layers verion 7.2.2 to export used jsPDF and creating the canvas using CanvasRenderingContext2D.

Here is an POC of the same where I tried to achieve the same output: - EXPORT to PDF

答案1

得分: 1

为了将绘制的图像向下移动,保存上下文并将其向下平移

mapContext.save();
mapContext.translate(0, 50);

在绘制图像的每个部分时,您需要将 setTransform 替换为 transform 并在操作周围使用 saverestore

mapContext.save();
CanvasRenderingContext2D.prototype.transform.apply(
  mapContext,
  matrix
);
mapContext.drawImage(canvas, 0, 0);
mapContext.restore();

然后将上下文还原到其默认原点并添加标题

mapContext.restore();

链接:https://stackblitz.com/edit/angular-nnsvbj?file=src/main.ts

英文:

To move the drawn image down save the context and translate it down

  mapContext.save();
  mapContext.translate(0, 50);

When drawing each part of the image you will need to replace setTransform with transform and use save and restore around the operation

        mapContext.save()
        CanvasRenderingContext2D.prototype.transform.apply(
          mapContext,
          matrix
        );
        mapContext.drawImage(canvas, 0, 0);
        mapContext.restore();

Afterwards restore the context to its default origin and add the header

  mapContext.restore();

https://stackblitz.com/edit/angular-nnsvbj?file=src/main.ts

huangapple
  • 本文由 发表于 2023年2月27日 11:56:55
  • 转载请务必保留本文链接:https://go.coder-hub.com/75576665.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定