104 lines
3.7 KiB
JavaScript
104 lines
3.7 KiB
JavaScript
////////////////////////////////////////////////////////////
|
|
//// © Microsoft. All rights reserved. ////
|
|
////////////////////////////////////////////////////////////
|
|
|
|
(function (AppNS) {
|
|
'use strict';
|
|
|
|
var Canvas = WinJS.Class.define(
|
|
|
|
// Constructor
|
|
function (domCanvas) {
|
|
this.domCanvas = domCanvas;
|
|
this.context = domCanvas.getContext("2d");
|
|
this.depth = 10;
|
|
this.history = [];
|
|
this.index = 0;
|
|
this.minIndex = 0;
|
|
this.maxIndex = 0;
|
|
this.history[this.index] = this.context.getImageData(0, 0, this.domCanvas.width, this.domCanvas.height);
|
|
},
|
|
|
|
// Variables and Methods
|
|
{
|
|
// Returns the color of the pixel at the given position
|
|
getColorAt: function (color, x, y) {
|
|
var imgData = this.context.getImageData(x, y, 1, 1);
|
|
color.fromData(imgData.data);
|
|
},
|
|
|
|
// Draws a circle using the current fill style at the given position with
|
|
// the given radius.
|
|
drawCircle: function (x, y, r) {
|
|
this.context.beginPath();
|
|
this.context.arc(x, y, r, 0, Math.PI * 2, true);
|
|
this.context.closePath();
|
|
this.context.fill();
|
|
},
|
|
|
|
// Saves the current state of the canvas, deleting all previously undone (future or forward) state.
|
|
saveState: function () {
|
|
this.index++;
|
|
this.maxIndex = this.index;
|
|
if (this.maxIndex - this.minIndex > this.depth) {
|
|
this.history[this.minIndex] = null;
|
|
this.minIndex = this.maxIndex - this.depth;
|
|
}
|
|
this.history[this.index] = this.context.getImageData(0, 0, this.domCanvas.width, this.domCanvas.height);
|
|
},
|
|
|
|
// Loads the state stored at the given index into the canvas
|
|
loadState: function (i) {
|
|
if (i >= this.minIndex && i <= this.maxIndex) {
|
|
this.index = i;
|
|
this.context.putImageData(this.history[this.index], 0, 0);
|
|
} else {
|
|
throw new Error("PaintPlay - Error: Index out of bounds");
|
|
}
|
|
},
|
|
|
|
// Returns true if able to undo (still some past actions)
|
|
canUndo: function () {
|
|
return this.index > this.minIndex;
|
|
},
|
|
|
|
// Returns true if able to redo (still some future actions)
|
|
canRedo: function () {
|
|
return this.index < this.maxIndex;
|
|
},
|
|
|
|
// Undoes the last action (goes back one step in state history)
|
|
undo: function () {
|
|
if (this.canUndo()) {
|
|
this.loadState(this.index - 1);
|
|
}
|
|
},
|
|
|
|
// Redoes the next action (goes forward one step in state history)
|
|
redo: function () {
|
|
if (this.canRedo()) {
|
|
this.loadState(this.index + 1);
|
|
}
|
|
},
|
|
|
|
// Clears the canvas.
|
|
clear: function () {
|
|
this.context.clearRect(0, 0, this.domCanvas.width, this.domCanvas.height);
|
|
this.saveState();
|
|
},
|
|
|
|
// Returns an image object containing the current state of the canvas.
|
|
getImage: function () {
|
|
var img = new Image();
|
|
var imgSrc = this.domCanvas.toDataURL("image/png");
|
|
img.src = imgSrc;
|
|
return img;
|
|
},
|
|
}
|
|
);
|
|
|
|
WinJS.Namespace.defineWithParent(AppNS, "Painter.Graphics", {
|
|
Canvas: Canvas
|
|
});
|
|
|
|
})(Microsoft.Paint);
|