first
This commit is contained in:
adrianvic
commit
59426d62fb
102 changed files with 42796 additions and 0 deletions
17
Controls/Canvas/Canvas.css
Normal file
17
Controls/Canvas/Canvas.css
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
.Canvas
|
||||
{
|
||||
margin-left: 100px;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
#paintCanvas
|
||||
{
|
||||
background: rgb(242, 242, 222);
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.pannable
|
||||
{
|
||||
overflow-x: scroll !important;
|
||||
}
|
||||
33
Controls/Canvas/Canvas.html
Normal file
33
Controls/Canvas/Canvas.html
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=10" />
|
||||
<title>Canvas</title>
|
||||
|
||||
<link rel="stylesheet" href="Canvas.css" />
|
||||
|
||||
<script src="/WinJS/js/base.js"></script>
|
||||
<script src="/JS/Global.js"></script>
|
||||
|
||||
<!-- canvas control files -->
|
||||
<script src="/Controls/Paint/Math/Point.js"></script>
|
||||
<script src="/Controls/Paint/Math/Vector.js"></script>
|
||||
<script src="/Controls/Paint/Graphics/Canvas.js"></script>
|
||||
<script src="/Controls/Paint/Graphics/Color.js"></script>
|
||||
<script src="/Controls/Paint/Graphics/Path.js"></script>
|
||||
<script src="/Controls/Paint/Graphics/Texture.js"></script>
|
||||
<script src="/Controls/Paint/Tools/Crayon.js"></script>
|
||||
<script src="/Controls/Paint/Tools/Marker.js"></script>
|
||||
<script src="/Controls/Paint/Tools/Neon.js"></script>
|
||||
<script src="/Controls/Paint/Tools/Eraser.js"></script>
|
||||
<script src="/Controls/Paint/Tools/Bristle.js"></script>
|
||||
<script src="/Controls/Paint/Tools/Brush.js"></script>
|
||||
<script src="/Controls/Paint/Tools/Pipe.js"></script>
|
||||
<script src="/Controls/Paint/Painter.js"></script>
|
||||
<script src="ToolCards.js"></script>
|
||||
<script src="Canvas.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="paintCanvas"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
493
Controls/Canvas/Canvas.js
Normal file
493
Controls/Canvas/Canvas.js
Normal file
|
|
@ -0,0 +1,493 @@
|
|||
////////////////////////////////////////////////////////////
|
||||
//// © Microsoft. All rights reserved. ////
|
||||
////////////////////////////////////////////////////////////
|
||||
|
||||
/// <reference path="Paint.js" />
|
||||
/// <reference path="Painter.js" />
|
||||
|
||||
(function (AppNS) {
|
||||
"use strict";
|
||||
var WinUtils = WinJS.Utilities;
|
||||
|
||||
// Enum of pointer event information
|
||||
var pointerInfo = {
|
||||
|
||||
// Pointer type
|
||||
touch: 2,
|
||||
pen: 3,
|
||||
mouse: 4,
|
||||
|
||||
// Button pressed
|
||||
noButtons: 0,
|
||||
leftButton: 1,
|
||||
rightButton: 2,
|
||||
middleButton: 4,
|
||||
};
|
||||
|
||||
var layoutState = Windows.UI.ViewManagement.ApplicationLayoutState;
|
||||
|
||||
function fragmentLoad(root, state) {
|
||||
// Set up canvas dimensions
|
||||
var canvas = root.querySelector("#paintCanvas");
|
||||
canvas.height = state.canvasHeight - state.canvasBorder;
|
||||
canvas.style.height = canvas.height + "px";
|
||||
canvas.width = state.canvasWidth - state.canvasBorder * 2;
|
||||
canvas.style.width = canvas.width + "px";
|
||||
|
||||
var eventHost = document.createElement("div");
|
||||
var pointerDown = [];
|
||||
var Painter = AppNS.Painter;
|
||||
var mainPainter = new Painter.Painter(canvas);
|
||||
var canvasBlocked = false;
|
||||
var classes = { pannable: "pannable" };
|
||||
var undoBlobPrefix = "undoBlob-";
|
||||
|
||||
// Initialize canvas with saved blob
|
||||
if (state.canvasBlobName) {
|
||||
Windows.Storage.ApplicationData.current.localFolder.getFileAsync(state.canvasBlobName)
|
||||
.then(function (file) {
|
||||
var url = URL.createObjectURL(file, false);
|
||||
var img = document.createElement("img");
|
||||
img.addEventListener("load", function () {
|
||||
canvas.getContext("2d").drawImage(img, 0, 0);
|
||||
});
|
||||
img.src = url;
|
||||
});
|
||||
}
|
||||
|
||||
// Initialize undo stack
|
||||
if (state.undoBlobNames) {
|
||||
for (var i = 0, len = state.undoBlobNames.length; i < len; i++) {
|
||||
var blobName = state.undoBlobNames[i];
|
||||
Windows.Storage.ApplicationData.current.localFolder.getFileAsync(blobName)
|
||||
.then(function (file) {
|
||||
var url = URL.createObjectURL(file, false);
|
||||
var img = document.createElement("img");
|
||||
var tempCanvas = document.createElement("canvas");
|
||||
tempCanvas.height = canvas.height;
|
||||
tempCanvas.width = canvas.width;
|
||||
img.addEventListener("load", function () {
|
||||
var context = tempCanvas.getContext("2d");
|
||||
context.drawImage(img, 0, 0);
|
||||
mainPainter.canvas.history.push(context.getImageData(0, 0, mainPainter.canvas.domCanvas.offsetWidth, mainPainter.canvas.domCanvas.offsetHeight));
|
||||
mainPainter.canvas.maxIndex++;
|
||||
mainPainter.canvas.index++;
|
||||
});
|
||||
img.src = url;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
AppNS.CanvasManager.loadAllTools(mainPainter);
|
||||
|
||||
// Initialize canvas
|
||||
var toolName = state.toolName || AppNS.CanvasManager.ToolNames.Marker;
|
||||
var toolCard = AppNS.CanvasManager.ToolCards[toolName];
|
||||
mainPainter.toolName = toolName;
|
||||
mainPainter.tool.width = state.width || toolCard.supportedSizes[toolCard.defaultSizeIndex];
|
||||
|
||||
if (state.toolOptionValueIndex || state.toolOptionValueIndex === 0) {
|
||||
mainPainter.tool[toolCard.optionKey] = toolCard.optionValues[state.toolOptionValueIndex];
|
||||
}
|
||||
|
||||
function downListener(event) {
|
||||
if (!pointerDown[event.pointerId] && (leftClick(event) || notMouse(event)) && !canvasBlocked) {
|
||||
mainPainter.drawStart(dataFromEvent(event));
|
||||
pointerDown[event.pointerId] = true;
|
||||
}
|
||||
}
|
||||
|
||||
function moveListener(event) {
|
||||
if (pointerDown[event.pointerId] && !canvasBlocked) {
|
||||
mainPainter.draw(dataFromEvent(event));
|
||||
}
|
||||
}
|
||||
|
||||
function upListener(event) {
|
||||
if (pointerDown[event.pointerId] && !canvasBlocked) {
|
||||
mainPainter.drawStop(dataFromEvent(event));
|
||||
AppNS.ToolbarManager.showUndo();
|
||||
pointerDown[event.pointerId] = false;
|
||||
}
|
||||
}
|
||||
|
||||
function dataFromEvent(event) {
|
||||
var data = {};
|
||||
data.x = event.offsetX;
|
||||
data.y = event.offsetY;
|
||||
data.id = event.pointerId;
|
||||
return data;
|
||||
}
|
||||
|
||||
function notMouse(event) {
|
||||
return (event.pointerType !== pointerInfo.mouse);
|
||||
}
|
||||
|
||||
function leftClick(event) {
|
||||
return (event.pointerType === pointerInfo.mouse && event.button === pointerInfo.leftButton);
|
||||
}
|
||||
|
||||
// Event listeners for the canvas
|
||||
canvas.addEventListener("MSPointerDown", downListener);
|
||||
canvas.addEventListener("MSPointerOver", downListener);
|
||||
canvas.addEventListener("MSPointerMove", moveListener);
|
||||
canvas.addEventListener("MSPointerOut", upListener);
|
||||
canvas.addEventListener("MSPointerUp", upListener);
|
||||
|
||||
WinJS.Namespace.defineWithParent(AppNS, "CanvasManager", {
|
||||
color: {
|
||||
get: function () {
|
||||
/// <summary>
|
||||
/// Gets the current color string value
|
||||
/// </summary>
|
||||
return mainPainter.color.toString();
|
||||
},
|
||||
|
||||
set: function (newColor) {
|
||||
/// <summary>
|
||||
/// Sets the current color string value
|
||||
/// </summary>
|
||||
/// <param name='newColor'>
|
||||
/// The string value for the color
|
||||
/// </param>
|
||||
var color = new Painter.Graphics.Color();
|
||||
color.fromString(newColor);
|
||||
mainPainter.color = color;
|
||||
}
|
||||
},
|
||||
|
||||
clearCanvas: function () {
|
||||
/// <summary>
|
||||
/// Resets the canvas to a blank state
|
||||
/// </summary>
|
||||
mainPainter.canvas.clear();
|
||||
AppNS.ToolbarManager.showUndo();
|
||||
},
|
||||
|
||||
undoCanvas: function () {
|
||||
/// <summary>
|
||||
/// Undoes the last stroke
|
||||
/// </summary>
|
||||
if (mainPainter.canvas.canUndo()) {
|
||||
mainPainter.canvas.undo();
|
||||
}
|
||||
AppNS.ToolbarManager.hideUndo();
|
||||
},
|
||||
|
||||
canUndo: function () {
|
||||
/// <summary>
|
||||
/// Returns whether or not another undo action can be executed
|
||||
/// </summary>
|
||||
/// <return>
|
||||
/// Boolean representing whether or not another undo action can be executed
|
||||
/// </return>
|
||||
return mainPainter.canvas.canUndo();
|
||||
},
|
||||
|
||||
redoCanvas: function () {
|
||||
/// <summary>
|
||||
/// Redoes the last stroke
|
||||
/// </summary>
|
||||
if (mainPainter.canvas.canRedo()) {
|
||||
mainPainter.canvas.redo();
|
||||
}
|
||||
AppNS.ToolbarManager.showUndo();
|
||||
},
|
||||
|
||||
toolWidth: {
|
||||
get: function () {
|
||||
/// <summary>
|
||||
/// Sets current tool
|
||||
/// </summary>
|
||||
/// <param name='newBrush'>
|
||||
/// The string value for the tool
|
||||
/// </param>
|
||||
return mainPainter.tool.width;
|
||||
},
|
||||
|
||||
set: function (newWidth) {
|
||||
/// <summary>
|
||||
/// Sets the current tool width
|
||||
/// </summary>
|
||||
/// <param name='newWidth'>
|
||||
/// The width value in pixels
|
||||
/// </param>
|
||||
mainPainter.tool.width = newWidth;
|
||||
}
|
||||
},
|
||||
|
||||
getToolProperty: function (optionKey) {
|
||||
/// <summary>
|
||||
/// Gets the tool specific property
|
||||
/// </summary>
|
||||
/// <param name='optionKey'>
|
||||
/// The property key to be returned
|
||||
/// </param>
|
||||
/// <return>
|
||||
/// The value currently assigned to the property. Can be any type.
|
||||
/// </return>
|
||||
return mainPainter.tool[optionKey];
|
||||
},
|
||||
|
||||
setToolProperty: function (optionKey, optionValue) {
|
||||
/// <summary>
|
||||
/// Sets the tool specific property
|
||||
/// </summary>
|
||||
/// <param name='optionKey'>
|
||||
/// The property key to be set
|
||||
/// </param>
|
||||
/// <param name='optionValue'>
|
||||
/// The value to be set
|
||||
/// </param>
|
||||
mainPainter.tool[optionKey] = optionValue;
|
||||
},
|
||||
|
||||
tool: {
|
||||
get: function () {
|
||||
/// <summary>
|
||||
/// Returns the current tool
|
||||
/// </summary>
|
||||
/// <returns>
|
||||
/// Tool
|
||||
/// </returns>
|
||||
return mainPainter.tool;
|
||||
},
|
||||
|
||||
set: function (newBrush) {
|
||||
/// <summary>
|
||||
/// Sets current tool
|
||||
/// </summary>
|
||||
/// <param name='newBrush'>
|
||||
/// The string value for the tool
|
||||
/// </param>
|
||||
mainPainter.tool = newBrush;
|
||||
}
|
||||
},
|
||||
|
||||
canvasBitmap: {
|
||||
get: function () {
|
||||
/// <summary>
|
||||
/// Returns the current image data on the canvas
|
||||
/// </summary>
|
||||
/// <returns>
|
||||
/// ImageData
|
||||
/// </returns>
|
||||
return mainPainter.canvas.context.getImageData(0, 0, mainPainter.canvas.domCanvas.offsetWidth, mainPainter.canvas.domCanvas.offsetHeight);
|
||||
},
|
||||
|
||||
set: function (imageData) {
|
||||
/// <summary>
|
||||
/// Sets the image data displayed on the canvas
|
||||
/// </summary>
|
||||
/// <param name='imageData'>
|
||||
/// ImageData object to be displayed
|
||||
/// </param>
|
||||
mainPainter.canvas.context.putImageData(imageData, 0, 0);
|
||||
}
|
||||
},
|
||||
|
||||
getScaledCanvasBlob: function (height, width) {
|
||||
/// <summary>
|
||||
/// Returns the a scaled canvas blob
|
||||
/// </summary>
|
||||
/// <param name='height'>
|
||||
/// Height of the new canvas blob
|
||||
/// </param>
|
||||
/// <param name='width'>
|
||||
/// Width of the new canvas blob
|
||||
/// </param>
|
||||
/// <returns>
|
||||
/// Blob
|
||||
/// </returns>
|
||||
var newCanvas = document.createElement("canvas");
|
||||
var context = newCanvas.getContext("2d");
|
||||
newCanvas.width = width;
|
||||
newCanvas.height = height;
|
||||
context.drawImage(mainPainter.canvas.domCanvas, 0, 0, width, height);
|
||||
return newCanvas.msToBlob();
|
||||
},
|
||||
|
||||
canvasBlob: {
|
||||
get: function () {
|
||||
/// <summary>
|
||||
/// Returns the current image data on the canvas as a blob
|
||||
/// </summary>
|
||||
/// <returns>
|
||||
/// Blob
|
||||
/// </returns>
|
||||
return mainPainter.canvas.domCanvas.msToBlob();
|
||||
}
|
||||
},
|
||||
|
||||
undoBlobNames: {
|
||||
get: function () {
|
||||
/// <summary>
|
||||
/// Returns an array with the names identifying the undo blobs indexed chronologically
|
||||
/// </summary>
|
||||
/// <returns>
|
||||
/// Array of strings
|
||||
/// </returns>
|
||||
var blobNames = [];
|
||||
for (var i = mainPainter.canvas.minIndex; i < mainPainter.canvas.index; i++) {
|
||||
blobNames.push(undoBlobPrefix + (i - mainPainter.canvas.minIndex));
|
||||
}
|
||||
return blobNames;
|
||||
}
|
||||
},
|
||||
|
||||
undoBlobs: {
|
||||
get: function () {
|
||||
/// <summary>
|
||||
/// Returns an object with the undo stack blobs
|
||||
/// </summary>
|
||||
/// <returns>
|
||||
/// Object in which keys are the blob names strings and values are blobs
|
||||
/// </returns>
|
||||
var blobs = {};
|
||||
for (var i = mainPainter.canvas.minIndex; i < mainPainter.canvas.index; i++) {
|
||||
var tempCanvas = document.createElement("canvas");
|
||||
tempCanvas.height = mainPainter.canvas.domCanvas.height;
|
||||
tempCanvas.width = mainPainter.canvas.domCanvas.width;
|
||||
tempCanvas.getContext("2d").putImageData(mainPainter.canvas.history[i], 0, 0);
|
||||
blobs[undoBlobPrefix + (i - mainPainter.canvas.minIndex)] = tempCanvas.msToBlob();
|
||||
}
|
||||
return blobs;
|
||||
}
|
||||
},
|
||||
|
||||
// Saves the current canvas to a file in the pictures library.
|
||||
// File name will be 'Painting <date>'.
|
||||
saveCanvas: function () {
|
||||
var filename = "Painting.png";
|
||||
AppNS.Utils.writeBlobToPicturesFolderAsync(this.canvasBlob, filename);
|
||||
},
|
||||
|
||||
canvasBlocked: {
|
||||
set: function (cBlocked) {
|
||||
/// <summary>
|
||||
/// Sets whether the drawing on canvas is disabled or enabled
|
||||
/// </summary>
|
||||
/// <param name='cBlocked'>
|
||||
/// Boolean representing wether or not the canvas is blocked
|
||||
/// </param>
|
||||
if (typeof cBlocked === "boolean") {
|
||||
canvasBlocked = cBlocked;
|
||||
}
|
||||
},
|
||||
|
||||
get: function () {
|
||||
/// <summary>
|
||||
/// Returns whether the drawing on canvas is disabled or enabled
|
||||
/// </summary>
|
||||
/// <returns>
|
||||
/// Boolean
|
||||
/// </returns>
|
||||
return canvasBlocked;
|
||||
}
|
||||
},
|
||||
|
||||
canvasPannable: {
|
||||
get: function () {
|
||||
/// <summary>
|
||||
/// Returns whether or not the canvas is pannable
|
||||
/// </summary>
|
||||
/// <returns>
|
||||
/// Boolean
|
||||
/// </returns>
|
||||
return root.className.indexOf(classes.pannable) !== -1;
|
||||
},
|
||||
|
||||
set: function (isPannable) {
|
||||
/// <summary>
|
||||
/// Enables or disables panning on the canvas
|
||||
/// </summary>
|
||||
/// <param name='isPannable'>
|
||||
/// Boolean representing wether or not the canvas is pannable
|
||||
/// </param>
|
||||
if (isPannable) {
|
||||
WinUtils.addClass(root, classes.pannable);
|
||||
} else {
|
||||
WinUtils.removeClass(root, classes.pannable);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
changeLayout: function (newLayout) {
|
||||
/// <summary>
|
||||
/// Changes the canvas layout to a specified layout such as snap or fill
|
||||
/// </summary>
|
||||
|
||||
// Reposition scroll for snap and fill view
|
||||
if (newLayout !== layoutState.fullScreen) {
|
||||
root.scrollLeft = (canvas.width - window.innerWidth) / 2;
|
||||
}
|
||||
},
|
||||
|
||||
addEventListener: function (eventName, eventCallback, capture) {
|
||||
/// <summary>
|
||||
/// Registers an event handler for the specified event type
|
||||
/// </summary>
|
||||
/// <param name='eventName'>
|
||||
/// The type of event type to register
|
||||
/// </param>
|
||||
/// <param name='eventCallback'>
|
||||
/// The event handler function to associate with the event
|
||||
/// </param>
|
||||
/// <param name='capture'>
|
||||
/// A Boolean value that specifies the event phase to add the event handler for:
|
||||
/// true
|
||||
/// Register the event handler for the capturing phase
|
||||
/// false
|
||||
/// Register the event handler for the bubbling phase
|
||||
/// </param>
|
||||
/// <returns>
|
||||
/// None
|
||||
/// </returns>
|
||||
|
||||
eventHost.addEventListener(eventName, eventCallback, capture);
|
||||
},
|
||||
|
||||
removeEventListener: function (eventName, eventCallback, capture) {
|
||||
/// <summary>
|
||||
/// Removes an event handler that the addEventListener method registered
|
||||
/// </summary>
|
||||
/// <param name='eventName'>
|
||||
/// The event type that the event handler is registered for
|
||||
/// </param>
|
||||
/// <param name='eventCallback'>
|
||||
/// The event handler function to remove
|
||||
/// </param>
|
||||
/// <param name='capture'>
|
||||
/// A Boolean value that specifies the event phase to add the event handler for:
|
||||
/// true
|
||||
/// Remove the capturing phase event handler
|
||||
/// false
|
||||
/// Remove the bubbling phase event handler
|
||||
/// </param>
|
||||
/// <returns>
|
||||
/// None
|
||||
/// </returns>
|
||||
|
||||
eventHost.removeEventListener(eventName, eventCallback, capture);
|
||||
},
|
||||
|
||||
// Raises an event to listeners
|
||||
_fireEvent: function (eventName, payload) {
|
||||
if (document.createEvent) {
|
||||
var eventObject = document.createEvent("Event");
|
||||
eventObject.initEvent(eventName, true, false);
|
||||
|
||||
if (payload) {
|
||||
eventObject.payload = payload;
|
||||
}
|
||||
|
||||
eventHost.dispatchEvent(eventObject);
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
WinJS.Namespace.defineWithParent(AppNS, "CanvasManager", {
|
||||
fragmentLoad: fragmentLoad,
|
||||
});
|
||||
})(Microsoft.Paint);
|
||||
107
Controls/Canvas/ToolCards.js
Normal file
107
Controls/Canvas/ToolCards.js
Normal file
|
|
@ -0,0 +1,107 @@
|
|||
////////////////////////////////////////////////////////////
|
||||
//// © Microsoft. All rights reserved. ////
|
||||
////////////////////////////////////////////////////////////
|
||||
|
||||
(function (AppNS) {
|
||||
var supportedSizes = [60, 40, 30, 20, 10, 3];
|
||||
|
||||
// Create texture image for crayon
|
||||
var textureImage = document.createElement("img");
|
||||
textureImage.src = "../Controls/Paint/Res/crayon_texture.png";
|
||||
|
||||
WinJS.Namespace.defineWithParent(AppNS, "CanvasManager", {
|
||||
ToolNames: {
|
||||
Eraser: "eraser",
|
||||
Marker: "marker",
|
||||
Brush: "brush",
|
||||
Neon: "neon",
|
||||
Pipe: "pipe",
|
||||
Crayon: "crayon"
|
||||
},
|
||||
|
||||
ToolCards: {
|
||||
marker: {
|
||||
toolClass: AppNS.Painter.Tools.Marker,
|
||||
label: "Marker", // TODO: Win8Apps WORK 92: Add localization support
|
||||
optionKey: "opacity",
|
||||
optionValues: [1, 0.85, 0.7, 0.5, 0.35, 0.2],
|
||||
defaultOptionIndex: 1,
|
||||
defaultSizeIndex: 4,
|
||||
optionLabel: "Transparency", // TODO: Win8Apps WORK 92: Add localization support
|
||||
supportedSizes: supportedSizes
|
||||
},
|
||||
brush: {
|
||||
toolClass: AppNS.Painter.Tools.Brush,
|
||||
label: "Brush", // TODO: Win8Apps WORK 92: Add localization support
|
||||
optionKey: "fade",
|
||||
optionValues: [0, 1000, 700, 400, 200, 100],
|
||||
defaultOptionIndex: 0,
|
||||
defaultSizeIndex: 3,
|
||||
optionLabel: "Fade", // TODO: Win8Apps WORK 92: Add localization support
|
||||
supportedSizes: supportedSizes
|
||||
},
|
||||
neon: {
|
||||
toolClass: AppNS.Painter.Tools.Neon,
|
||||
label: "Neon", // TODO: Win8Apps WORK 92: Add localization support
|
||||
optionKey: "glow",
|
||||
optionValues: [70, 55, 40, 25, 10, 0],
|
||||
defaultOptionIndex: 4,
|
||||
defaultSizeIndex: 3,
|
||||
optionLabel: "Glow", // TODO: Win8Apps WORK 92: Add localization support
|
||||
supportedSizes: supportedSizes
|
||||
},
|
||||
pipe: {
|
||||
toolClass: AppNS.Painter.Tools.Pipe,
|
||||
label: "3D", // TODO: Win8Apps WORK 92: Add localization support
|
||||
optionKey: "height",
|
||||
optionValues: [6, 5, 4, 3, 2, 1],
|
||||
defaultOptionIndex: 4,
|
||||
defaultSizeIndex: 3,
|
||||
optionLabel: "Depth", // TODO: Win8Apps WORK 92: Add localization support
|
||||
supportedSizes: supportedSizes
|
||||
},
|
||||
crayon: {
|
||||
toolClass: AppNS.Painter.Tools.Crayon,
|
||||
label: "Crayon", // TODO: Win8Apps WORK 92: Add localization support
|
||||
optionKey: "density",
|
||||
optionValues: [2, 1.75, 1.5, 1.25, 1.0, .75],
|
||||
defaultOptionIndex: 1,
|
||||
defaultSizeIndex: 4,
|
||||
optionLabel: "Density", // TODO: Win8Apps WORK 92: Add localization support
|
||||
supportedSizes: supportedSizes,
|
||||
textureImage: textureImage
|
||||
},
|
||||
eraser: {
|
||||
toolClass: AppNS.Painter.Tools.Eraser,
|
||||
label: "Eraser", // TODO: Win8Apps WORK 92: Add localization support
|
||||
supportedSizes: supportedSizes,
|
||||
defaultSizeIndex: 4
|
||||
}
|
||||
},
|
||||
|
||||
// Loads all available tools into the given painter
|
||||
loadAllTools: function (painter) {
|
||||
var cards = AppNS.CanvasManager.ToolCards;
|
||||
var names = AppNS.CanvasManager.ToolNames;
|
||||
for (var name in cards) {
|
||||
var card = cards[name];
|
||||
var tool = new card.toolClass();
|
||||
tool.width = card.supportedSizes[card.defaultSizeIndex];
|
||||
if (name !== names.Eraser) {
|
||||
tool[card.optionKey] = card.optionValues[card.defaultOptionIndex];
|
||||
}
|
||||
painter.loadTool(tool, name);
|
||||
|
||||
if (name === names.Crayon) {
|
||||
// Create texture image for crayon
|
||||
var textureImage = new Image(40, 40);
|
||||
var crayonTool = tool;
|
||||
textureImage.addEventListener("load", function () {
|
||||
crayonTool.setTexture(textureImage);
|
||||
});
|
||||
textureImage.src = "../Controls/Paint/Res/crayon_texture.png";
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
})(Microsoft.Paint);
|
||||
Reference in a new issue