How can I change the icon of the StickyAnnotation

[Volker Andres]

I would like to change the icon of the StickyAnnotation https://www.pdftron.com/webviewer/demo/lib/html5/doc/symbols/Annotations.StickyAnnotation.html. There is an icon property on that class, but I would like to inject my own icon or change the code of the current "comment"-icon.

[Justin Jung]

Hello,

If you want to change the appearance, you can override the draw function of the sticky note. For example,

Annotations.StickyAnnotation.prototype.draw = function(ctx, rotation) {

  if (!this.isReply()) {

    rotation = rotation || 0;

    ctx.rotate(-rotation * Math.PI / 180);

    var roffsets = window.utils.getRotationOffsets((360 - rotation) % 360 , this.Width, this.Height);

    ctx.translate(-roffsets.dx, -roffsets.dy);

    ctx.fillStyle = "#FF0000";

    ctx.fillRect(0, 0, this.Width, this.Height);

    ctx.stroke();

  }

};

Justin Jung

Software Developer

PDFTron Systems Inc.

[Volker Andres]

Thank you

[Volker Andres]

I made something like

ctx.fillStyle = this.StrokeColor;

to allow color changes. This is working fine in Browser and Android, but not in iOS. Do you maybe know why? Could you please post the whole original code of the StickyAnnotation?

[Justin Jung]

You might want to try this.StrokeColor.toString().

For your information, here is the original draw function for StickyAnnotation:

draw: function(ctx, rotation) {

    // only draw the icon if this note is not a reply

    if (!this.isReply()) {

        var curveRadius = 5;

        var padding = 2;

        var minEdge = this['Width'] < this['Height'] ? this['Width'] : this['Height'];

        var bottomEdge = minEdge * 0.75;

        var tailRightEdge = minEdge * 0.48;

        var tailLeftEdge = minEdge * 0.29;

        var lineLeftEdge = minEdge * 0.19;

        var lineRightEdge = minEdge - lineLeftEdge;

        ctx.strokeStyle = 'rgb(0, 0, 0)';

        // use stroke color because it's actually 'color' and should be the fill of the sticky note

        ctx.fillStyle = this['StrokeColor'].toString();

        // allow opacity to be zero, by default it's one

        var opacity = (this['Opacity'] === 0) ? 0 : (this['Opacity'] || 1);

        ctx.globalAlpha = opacity;

        rotation = rotation || 0;

        ctx.rotate(-rotation * Math.PI / 180);

        var roffsets = window.utils.getRotationOffsets((360 - rotation) % 360 , this['Width'], this['Height']);

        ctx.translate(-roffsets.dx, -roffsets.dy);

        ctx.beginPath();

        ctx.moveTo(padding + curveRadius, padding);

        ctx.lineTo(minEdge - curveRadius - padding, padding);

        ctx.quadraticCurveTo(minEdge - padding, padding, minEdge - padding, curveRadius + padding);

        ctx.lineTo(minEdge - padding, bottomEdge - curveRadius);

        ctx.quadraticCurveTo(minEdge - padding, bottomEdge, minEdge - curveRadius - padding, bottomEdge);

        ctx.lineTo(tailRightEdge, bottomEdge);

        ctx.lineTo(tailLeftEdge, minEdge - padding);

        ctx.lineTo(tailLeftEdge, bottomEdge);

        ctx.lineTo(curveRadius + padding, bottomEdge);

        ctx.quadraticCurveTo(padding, bottomEdge, padding, bottomEdge - curveRadius);

        ctx.lineTo(padding, curveRadius + padding);

        ctx.quadraticCurveTo(padding, padding, curveRadius + padding, padding);

        ctx.fill();

        // draw the three horizontal lines

        ctx.moveTo(lineLeftEdge, minEdge * 0.25);

        ctx.lineTo(lineRightEdge, minEdge * 0.25);

        ctx.moveTo(lineLeftEdge, minEdge * 0.41);

        ctx.lineTo(lineRightEdge, minEdge * 0.41);

        ctx.moveTo(lineLeftEdge, minEdge * 0.57);

        ctx.lineTo(minEdge * 0.68, minEdge * 0.57);

        ctx.stroke();

    }

},

[Volker Andres]

Than you very much again, the toString() did the trick :)