Hi EveryBody,
I want to create a Drawing Application for iPad until now is fine.
With Google Chrome, the application works fine but when i launch the application in my iPad it's doesn't work.
I use mousedown, mouseover, etc .. in my App but iPad use touchstart, touchend, etc ..
i'd like to change my mousedown for a touchstart but i don't know very well how can i change that, i'm a beginner in javascript so i require your help
here your are my code :
Thanks guys ( sorry for my english i'm a belgian guy
)
I want to create a Drawing Application for iPad until now is fine.
With Google Chrome, the application works fine but when i launch the application in my iPad it's doesn't work.
I use mousedown, mouseover, etc .. in my App but iPad use touchstart, touchend, etc ..
i'd like to change my mousedown for a touchstart but i don't know very well how can i change that, i'm a beginner in javascript so i require your help
here your are my code :
Thanks guys ( sorry for my english i'm a belgian guy
)
Code:
// Copyright 2010 William Malone (www.williammalone.com)
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
var canvas;
var context;
var canvasWidth = 1024; // 490
var canvasHeight = 768; // 220
var padding = 25;
var lineWidth = 9;
var colorVert = "#cdff00";
var colorJaune = "#fcee21";
var colorOrange = "#e8630c";
var colorRose = "#d92958";
var colorMauve = "#c965ff";
var colorBleuClair = "#3fa9f5";
var colorBrun = "#8c6239";
var colorBlanc = "#ffffff";
var colorVertFonce = "#34be08";
var colorJauneFonce = "#edaa14";
var colorRouge = "#ff0000";
var colorRoseFonce = "#9e005d";
var colorMauveFonce = "#a80dff";
var colorBleuFonce = "#00669a";
var colorGris = "#808080";
var colorNoir = "#000000";
var outlineImage = new Image();
var VertImage = new Image();
var JauneImage = new Image();
var OrangeImage = new Image();
var RoseImage = new Image();
var MauveImage = new Image();
var BleuClairImage = new Image();
var BrunImage = new Image();
var BlancImage = new Image();
var VertFonceImage = new Image();
var JauneFonceImage = new Image();
var RougeImage = new Image();
var RoseFonceImage = new Image();
var MauveFonceImage = new Image();
var BleuFonceImage = new Image();
var GrisImage = new Image();
var NoirImage = new Image();
var markerImage = new Image();
var Gomme_Image = new Image();
var Pinceau_Image = new Image();
var TailleGrande_Image= new Image();
var TailleMoyenne_Image= new Image();
var TaillePetite_Image= new Image();
var TailleMini_Image= new Image();
var gommeImageWidth = 200;
var gommeImageHeight = 140;
var crayonBackgroundImage = new Image();
var markerBackgroundImage = new Image();
var eraserBackgroundImage = new Image();
var crayonTextureImage = new Image();
var clickX = new Array();
var clickY = new Array();
var clickColor = new Array();
var clickTool = new Array();
var clickSize = new Array();
var clickDrag = new Array();
var paint = false;
var curColor = colorVert; // Couleur de dpart
var curTool = "crayon";
var curSize = "normal";
var mediumStartX = 79; // Surface cliquable
var mediumStartY = 79; // Surface Cliquable
var mediumImageWidth = 79; // Taille des crayons
var mediumImageHeight = 79; // Hauteur des
var drawingAreaX = 272; // situation X, Y de la surface de dessin
var drawingAreaY = 51;
var drawingAreaWidth = 480; // Rsolution de le surface de dessin
var drawingAreaHeight = 668;
var toolHotspotStartY = 23;
var toolHotspotHeight = 38;
var sizeHotspotStartY = 157;
var sizeHotspotHeight = 36;
var sizeHotspotWidthObject = new Object();
sizeHotspotWidthObject.huge = 39;
sizeHotspotWidthObject.large = 25;
sizeHotspotWidthObject.normal = 18;
sizeHotspotWidthObject.small = 16;
var totalLoadResources = 8
var curLoadResNum = 0;
var PosX = 70;
var PosY = 60;
var Ecart = 79;
var test01 = 803;
var test02 = 57;
var GommeWidth = 170 ;
var GommeHeight = 114 ;
var PinceauHeight = 80 ;
var PinceauWidth = 240 ;
var EcartPinceauY = 25 ;
var EcartPinceauX = 45 ;
var EcartGommeY = 80 ;
var EcartGommeX = 75 ;
var EcartTailleHuge = 32 ;
var EcartTailleLarge = 22 ;
var EcartTailleSmall = 26 ;
var EcartTailleNormal = 26 ;
var HugeHeightWidth = 74 ;
var LargeHeightWidth = 50 ;
var NormalHeightWidth = 34 ;
var SmallHeightWidth = 18 ;
var EcartHugeX = 94 ;
var EcartLargeX = 106 ;
var EcartNormalX = 114 ;
var EcartSmallX = 122 ;
/**
* Calls the redraw function after all neccessary resources are loaded.
*/
function resourceLoaded()
{
if(++curLoadResNum >= totalLoadResources){
redraw();
}
}
/**
* Creates a canvas element, loads images, adds events, and draws the canvas for the first time.
*/
function prepareCanvas()
{
// Create the canvas (Neccessary for IE because it doesn't know what a canvas element is)
var canvasDiv = document.getElementById('canvasDiv');
canvas = document.createElement('canvas');
canvas.setAttribute('width', canvasWidth);
canvas.setAttribute('height', canvasHeight);
canvas.setAttribute('id', 'canvas');
canvasDiv.appendChild(canvas);
if(typeof G_vmlCanvasManager != 'undefined') {
canvas = G_vmlCanvasManager.initElement(canvas);
}
context = canvas.getContext("2d"); // Grab the 2d canvas context
// Note: The above code is a workaround for IE 8 and lower. Otherwise we could have used:
// context = document.getElementById('canvas').getContext("2d");
// Load images
// -----------
// Add mouse events
// ----------------
$('#canvas').mousedown(function onTouchStart(e)
{
// Mouse down location
var mouseX = e.pageX ;
var mouseY = e.pageY ;
if(mouseX < drawingAreaX) // Left of the drawing area
{
if(mouseX > mediumStartX)
{
if(mouseY > mediumStartY && mouseY < mediumStartY * 2){
curColor = colorVert;
}else if(mouseY > mediumStartY * 2 && mouseY < mediumStartY * 3){
curColor = colorJaune;
}else if(mouseY > mediumStartY * 3 && mouseY < mediumStartY * 4){
curColor = colorOrange;
}else if(mouseY > mediumStartY * 4 && mouseY < mediumStartY * 5){
curColor = colorRose;
}else if(mouseY > mediumStartY * 5 && mouseY < mediumStartY * 6){
curColor = colorMauve;
}else if(mouseY > mediumStartY * 6 && mouseY < mediumStartY * 7){
curColor = colorBleuClair;
}else if(mouseY > mediumStartY * 7 && mouseY < mediumStartY * 8){
curColor = colorBrun;
}else if(mouseY > mediumStartY * 8 && mouseY < mediumStartY * 9){
curColor = colorBlanc;
}
}
if(mouseX > mediumStartX + mediumImageWidth)
{
if(mouseY > mediumStartY && mouseY < mediumStartY * 2){
curColor = colorVertFonce;
}else if(mouseY > mediumStartY * 2 && mouseY < mediumStartY * 3){
curColor = colorOrange;
}else if(mouseY > mediumStartY * 3 && mouseY < mediumStartY * 4){
curColor = colorRouge;
}else if(mouseY > mediumStartY * 4 && mouseY < mediumStartY * 5){
curColor = colorRoseFonce;
}else if(mouseY > mediumStartY * 5 && mouseY < mediumStartY * 6){
curColor = colorMauveFonce;
}else if(mouseY > mediumStartY * 6 && mouseY < mediumStartY * 7){
curColor = colorBleuFonce;
}else if(mouseY > mediumStartY * 7 && mouseY < mediumStartY * 8){
curColor = colorGris;
}else if(mouseY > mediumStartY * 8 && mouseY < mediumStartY * 9){
curColor = colorNoir;
}
}
}
else if(mouseX > drawingAreaX + drawingAreaWidth) // Right of the drawing area
{
if(mouseY > EcartGommeY + GommeHeight + EcartPinceauY && mouseY < EcartGommeY + GommeHeight + EcartPinceauY + PinceauHeight && mouseX > drawingAreaX + drawingAreaWidth + EcartPinceauX && mouseX < drawingAreaX + drawingAreaWidth + EcartPinceauX + PinceauWidth ){
curTool = "crayon";
}else if(mouseY > EcartGommeY && mouseY < EcartGommeY + GommeHeight && mouseX > drawingAreaX + drawingAreaWidth + EcartGommeX && mouseX < drawingAreaX + drawingAreaWidth + EcartGommeX + GommeWidth ){
curTool = "eraser";
}else if( mouseY > EcartGommeY + GommeHeight + EcartPinceauY + PinceauHeight + EcartTailleHuge && mouseY < EcartGommeY + GommeHeight + EcartPinceauY + PinceauHeight + EcartTailleHuge + HugeHeightWidth && mouseX > drawingAreaX + drawingAreaWidth + EcartHugeX && mouseX < drawingAreaX + drawingAreaWidth + EcartHugeX + HugeHeightWidth ){
curSize = "huge";
}else if( mouseY > EcartGommeY + GommeHeight + EcartPinceauY + PinceauHeight + EcartTailleHuge + HugeHeightWidth + EcartTailleLarge && mouseY < EcartGommeY + GommeHeight + EcartPinceauY + PinceauHeight + EcartTailleHuge + HugeHeightWidth + EcartTailleLarge + LargeHeightWidth && mouseX > drawingAreaX + drawingAreaWidth + EcartLargeX && mouseX < drawingAreaX + drawingAreaWidth + EcartLargeX + LargeHeightWidth ){
curSize = "large";
}else if( mouseY > EcartGommeY + GommeHeight + EcartPinceauY + PinceauHeight + EcartTailleHuge + HugeHeightWidth + EcartTailleLarge + LargeHeightWidth + EcartTailleNormal && mouseY < EcartGommeY + GommeHeight + EcartPinceauY + PinceauHeight + EcartTailleHuge + HugeHeightWidth + EcartTailleLarge + LargeHeightWidth + EcartTailleNormal + NormalHeightWidth && mouseX > drawingAreaX + drawingAreaWidth + EcartNormalX && mouseX < drawingAreaX + drawingAreaWidth + EcartNormalX + NormalHeightWidth ){
curSize = "normal";
}else if( mouseY > EcartGommeY + GommeHeight + EcartPinceauY + PinceauHeight + EcartTailleHuge + HugeHeightWidth + EcartTailleLarge + LargeHeightWidth + EcartTailleNormal + NormalHeightWidth + EcartTailleSmall && mouseY < EcartGommeY + GommeHeight + EcartPinceauY + PinceauHeight + EcartTailleHuge + HugeHeightWidth + EcartTailleLarge + LargeHeightWidth + EcartTailleNormal + NormalHeightWidth + EcartTailleSmall + SmallHeightWidth && mouseX > drawingAreaX + drawingAreaWidth + EcartSmallX && mouseX < drawingAreaX + drawingAreaWidth + EcartSmallX + SmallHeightWidth ){
curSize = "small";
}
}
paint = true;
addClick(mouseX, mouseY, false);
redraw();
});
$('#canvas').mousemove(function onTouchMove(e){
if(paint==true){
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
redraw();
}
});
$('#canvas').mouseup(function onTouchEnd(e){
paint = false;
redraw();
});
/**$('#canvas').mouseleave(function test01(e){
paint = false;
});**/
}
/**
* Adds a point to the drawing array.
* @param x
* @param y
* @param dragging
*/
function addClick(x, y, dragging)
{
clickX.push(x);
clickY.push(y);
clickTool.push(curTool);
clickColor.push(curColor);
clickSize.push(curSize);
clickDrag.push(dragging);
}
/**
* Clears the canvas.
*/
function clearCanvas()
{
context.fillStyle = '#ffffff'; // Work around for Chrome
context.fillRect(0, 0, canvasWidth, canvasHeight); // Fill in the canvas with white
canvas.width = canvas.width; // clears the canvas
}
/**
* Redraws the canvas.
*/
function redraw()
{
// Make sure required resources are loaded before redrawing
if(curLoadResNum < totalLoadResources){ return; }
clearCanvas();
var locX;
var locY;
if(curTool == "crayon")
{
}
else if(curTool == "eraser")
{
}
// Keep the drawing in the drawing area
context.save();
context.rect(drawingAreaX, drawingAreaY, drawingAreaWidth, drawingAreaHeight);
context.clip();
var radius;
var i = 0;
for(; i < clickX.length; i++)
{
if(clickSize[i] == "small"){
radius = 2;
}else if(clickSize[i] == "normal"){
radius = 5;
}else if(clickSize[i] == "large"){
radius = 10;
}else if(clickSize[i] == "huge"){
radius = 20;
}else{
alert("Error: Radius is zero for click " + i);
radius = 0;
}
context.beginPath();
if(clickDrag[i] && i){
context.moveTo(clickX[i-1], clickY[i-1]);
}else{
context.moveTo(clickX[i], clickY[i]);
}
context.lineTo(clickX[i], clickY[i]);
context.stroke();
context.closePath();
if(clickTool[i] == "eraser"){
//context.globalCompositeOperation = "destination-out"; // To erase instead of draw over with white
context.strokeStyle = 'white';
}else{
//context.globalCompositeOperation = "source-over"; // To erase instead of draw over with white
context.strokeStyle = clickColor[i];
}
context.lineJoin = "round";
context.lineWidth = radius;
}
// Draw the outline image
context.drawImage(outlineImage, drawingAreaX, drawingAreaY, drawingAreaWidth, drawingAreaHeight);
}
/**/