Wikitude

Hi,

drawing a 2D augmentation to match the dimensions of the recognised image target is quite easy using the JavaScript API. Simply use an AR.ImageDrawable as your augmentation and passt 1 as the input height. This will result in the height of your augmentation matching the height of the target exactly. If they both have the same aspect ratio, they width will match likewise. If not, you may set the scale.x property to the ratio of the aspect ratio of your target to the aspect ratio of your augmentation image to correct the discrepancy. Note, though, that the non-uniform scaling will cause a distortion. Having the aspect ratio match to begin with is the recommended approach if your image is anything other that a solidly coloured rectangle.

For identical aspect ratios:

var imageResource = new AR.ImageResource("assets/correctAspect.jpg");
var imageDrawable = new AR.ImageDrawable(imageResource, 1);

For different aspect ratios:

var imageResource = new AR.ImageResource("assets/incorrectAspect.jpg");
var imageDrawable = new AR.ImageDrawable(imageResource, 1, {
    scale: {
        x: aspectRatioTarget / aspectRatioImage
    }
});

The corresponding documentation page can be found here.

- Daniel