javascripthtmldicompapaya

how to manage zoom and length handle in papaya


What I want to do is

1) I want to draw a length on image and want to add handle to edit it.

2) When I want to zoom the image the drawn length should match the zoom level.

ctx.beginPath();
            ctx.moveTo(linearr[i].x1, linearr[i].y1);
            ctx.lineTo(linearr[i].x2, linearr[i].y2);
            ctx.closePath();
            ctx.stroke();

            ctx.beginPath();
            ctx.arc(linearr[i].x1, linearr[i].y1, 2, 0, Math.PI * 2, true);
            ctx.closePath();
            ctx.fillStyle = 'green';
            ctx.fill();
            ctx.stroke();

            ctx.beginPath();
            ctx.arc(linearr[i].x2, linearr[i].y2, 2, 0, Math.PI * 2, true);
            ctx.closePath();
            ctx.fillStyle = 'green';
            ctx.fill();
            ctx.stroke();

where linearr is an array


Solution

  • Papaya already supports a ruler tool, if that's what you're looking for.

    Otherwise, see the function papaya.viewer.Viewer.prototype.drawRuler() for an example of how to use the screen transform to draw lines, which includes the zoom transform. Another function that might be helpful to you is this.selectedSlice.findProximalRulerHandle().