有没有办法使用 SVG 作为 ImageData 创建 Stamp 注释
Is there a way to create a Stamp annotation using a SVG as ImageData
我想在 PDFTron 中使用 SVG 创建自定义图章注释。
我在某个 google 论坛上看到有人提出了同样的问题,一位 PDFTron 开发人员确实做出了回应,这就是我目前所知道的...
const svgElement = '<svg>my svg</svg>'
const CustomStamp = function() {
Annotations.StampAnnotation.call(this);
this.ImageData = encodeURI('data:image/svg+xml,' + svgElement);
}
CustomStamp.prototype = new Annotations.StampAnnotation();
const CustomCreateTool = function(docViewer) {
Tools.GenericAnnotationCreateTool.call(this, docViewer, CustomStamp);
};
CustomCreateTool.prototype = new Tools.GenericAnnotationCreateTool();
CustomCreateTool.prototype.mouseLeftDown = function() {
Tools.AnnotationSelectTool.prototype.mouseLeftDown.apply(this, arguments);
};
CustomCreateTool.prototype.mouseMove = function() {
Tools.AnnotationSelectTool.prototype.mouseMove.apply(this, arguments);
};
CustomCreateTool.prototype.mouseLeftUp = function(e) {
var annotation;
Tools.GenericAnnotationCreateTool.prototype.mouseLeftDown.call(this, e);
if (this.annotation) {
this.annotation.Width = 50;
this.annotation.Height = 50;
this.annotation.X -= this.annotation.Width/2;
this.annotation.Y -= this.annotation.Height/2;
this.annotation.NoResize = true;
annotation = this.annotation;
}
Tools.GenericAnnotationCreateTool.prototype.mouseLeftUp.call(this, e);
if (annotation) {
annotManager.redrawAnnotation(annotation);
}
但是,它似乎只绘制了一个空框...任何帮助将不胜感激!
我查看了您的代码,它似乎是正确的。亲自尝试一下,我相信问题出在您的测试 SVG 上;似乎缺少 xmlns
标记会在调用 encodeURI
.
时导致无效的 HTMLImage 元素
你能用下面的 SVG 试试你的代码吗?我用它来调试,并且图章按预期工作。
const svgElement = '<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /></svg>'
我想在 PDFTron 中使用 SVG 创建自定义图章注释。
我在某个 google 论坛上看到有人提出了同样的问题,一位 PDFTron 开发人员确实做出了回应,这就是我目前所知道的...
const svgElement = '<svg>my svg</svg>'
const CustomStamp = function() {
Annotations.StampAnnotation.call(this);
this.ImageData = encodeURI('data:image/svg+xml,' + svgElement);
}
CustomStamp.prototype = new Annotations.StampAnnotation();
const CustomCreateTool = function(docViewer) {
Tools.GenericAnnotationCreateTool.call(this, docViewer, CustomStamp);
};
CustomCreateTool.prototype = new Tools.GenericAnnotationCreateTool();
CustomCreateTool.prototype.mouseLeftDown = function() {
Tools.AnnotationSelectTool.prototype.mouseLeftDown.apply(this, arguments);
};
CustomCreateTool.prototype.mouseMove = function() {
Tools.AnnotationSelectTool.prototype.mouseMove.apply(this, arguments);
};
CustomCreateTool.prototype.mouseLeftUp = function(e) {
var annotation;
Tools.GenericAnnotationCreateTool.prototype.mouseLeftDown.call(this, e);
if (this.annotation) {
this.annotation.Width = 50;
this.annotation.Height = 50;
this.annotation.X -= this.annotation.Width/2;
this.annotation.Y -= this.annotation.Height/2;
this.annotation.NoResize = true;
annotation = this.annotation;
}
Tools.GenericAnnotationCreateTool.prototype.mouseLeftUp.call(this, e);
if (annotation) {
annotManager.redrawAnnotation(annotation);
}
但是,它似乎只绘制了一个空框...任何帮助将不胜感激!
我查看了您的代码,它似乎是正确的。亲自尝试一下,我相信问题出在您的测试 SVG 上;似乎缺少 xmlns
标记会在调用 encodeURI
.
你能用下面的 SVG 试试你的代码吗?我用它来调试,并且图章按预期工作。
const svgElement = '<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /></svg>'