3-Slice Image Scaling

Given the following image: button image

This demos shows how to display images with 3-slice scaling. The three images have different ratios between the source and destination slices.

The debugging flag of the ImageScaleView is set to true so you can see how the slices are sectioned off.

import device;
import ui.ImageScaleView;

exports = Class(GC.Application, function () {
	this.initUI = function () {
		this.style.backgroundColor = "#FFFFFF";

		var y = device.height / 2 - 165;
		for (var i = 0; i < 3; i++) {
			new ui.ImageScaleView({
				superview: this.view,
				x: device.width / 2 - 110,
				y: y + i * 110 + 10,
				width: 100,
				height: 100,
				image: "resources/images/window.png",
				scaleMethod: "3slice",
				debug: true,
				sourceSlices: {
					horizontal: {left: 16, center: 32, right: 16}
				},
				destSlices: {
					horizontal: {left: 16 + i * 16, right: 16 + i * 16}
				}
			});

			new ui.ImageScaleView({
				superview: this.view,
				x: device.width / 2 + 10,
				y: y + i * 110 + 10,
				width: 100,
				height: 100,
				image: "resources/images/window.png",
				scaleMethod: "3slice",
				debug: true,
				sourceSlices: {
					vertical: {top: 16, middle: 32, bottom: 16}
				},
				destSlices: {
					vertical: {top: 16 + i * 16, bottom: 16 + i * 16}
				}
			});
		}
	};
});

Run this code as the Application.js file in your project, and you should see something like this in the simulator: 9-slice screenshot