Bonjour à tous,
Je désire réalisé une WebApp pour iPad de coloriage, jusque la tout va bien.
Sous Chrome l'application fonctionne bien, le problème est que au passage sur l'iPad, ca ne marche plus.
Le problème vient du fait que dans l'application j'utilise un mousedown, mouseover, et mousend, sachant que sur iPad ca fonctionne avec des touchstart, touchmove et touchend.
J'aimerai transformé mes mousedown etc en touchstart mais je ne vois pas trop comment faire ..
Je peux vous exposé mon code si vous le voulez bien merci
// 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 dŽpart
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; // RŽsolution 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
// -----------
VertImage.onload = function() { resourceLoaded();
}
VertImage.src = "pictures/VertImage_Pastille.png";
//context.drawImage(VertImage, 0, 0, 100, 100);
markerImage.onload = function() { resourceLoaded();
}
JauneImage.src = "pictures/JauneImage_Pastille.png";
//context.drawImage(VertImage, 0, 0, 100, 100);
markerImage.onload = function() { resourceLoaded();
}
RoseImage.src = "pictures/RoseImage_Pastille.png";
//context.drawImage(VertImage, 0, 0, 100, 100);
markerImage.onload = function() { resourceLoaded();
}
OrangeImage.src = "pictures/OrangeImage_Pastille.png";
//context.drawImage(VertImage, 0, 0, 100, 100);
markerImage.onload = function() { resourceLoaded();
}
MauveImage.src = "pictures/MauveImage_Pastille.png";
//context.drawImage(VertImage, 0, 0, 100, 100);
markerImage.onload = function() { resourceLoaded();
}
BleuClairImage.src = "pictures/BleuClairImage_Pastille.png";
//context.drawImage(VertImage, 0, 0, 100, 100);
markerImage.onload = function() { resourceLoaded();
}
BrunImage.src = "pictures/BrunImage_Pastille.png";
//context.drawImage(VertImage, 0, 0, 100, 100);
markerImage.onload = function() { resourceLoaded();
}
BlancImage.src = "pictures/BlancImage_Pastille.png";
//context.drawImage(VertImage, 0, 0, 100, 100);
markerImage.onload = function() { resourceLoaded();
}
VertFonceImage.src = "pictures/VertFonceImage_Pastille.png";
//context.drawImage(VertImage, 0, 0, 100, 100);
markerImage.onload = function() { resourceLoaded();
}
JauneFonceImage.src = "pictures/JauneFonceImage_Pastille.png";
//context.drawImage(VertImage, 0, 0, 100, 100);
markerImage.onload = function() { resourceLoaded();
}
RougeImage.src = "pictures/RougeImage_Pastille.png";
//context.drawImage(VertImage, 0, 0, 100, 100);
markerImage.onload = function() { resourceLoaded();
}
RoseFonceImage.src = "pictures/RoseFonceImage_Pastille.png";
//context.drawImage(VertImage, 0, 0, 100, 100);
markerImage.onload = function() { resourceLoaded();
}
MauveFonceImage.src = "pictures/MauveFonceImage_Pastille.png";
//context.drawImage(VertImage, 0, 0, 100, 100);
markerImage.onload = function() { resourceLoaded();
}
BleuFonceImage.src = "pictures/BleuFonceImage_Pastille.png";
//context.drawImage(VertImage, 0, 0, 100, 100);
markerImage.onload = function() { resourceLoaded();
}
GrisImage.src = "pictures/GrisImage_Pastille.png";
//context.drawImage(VertImage, 0, 0, 100, 100);
markerImage.onload = function() { resourceLoaded();
}
NoirImage.src = "pictures/NoirImage_Pastille.png";
//context.drawImage(VertImage, 0, 0, 100, 100);
markerImage.onload = function() { resourceLoaded();
}
markerImage.src = "images/marker-outline.png";
Gomme_Image.onload = function() { resourceLoaded();
}
Gomme_Image.src = "pictures/gomme.png";
Pinceau_Image.onload = function() { resourceLoaded();
}
Pinceau_Image.src = "pictures/pinceau.png";
TailleGrande_Image.onload = function() { resourceLoaded();
}
TailleGrande_Image.src = "pictures/Taille_Grande.png";
TailleMoyenne_Image.onload = function() { resourceLoaded();
}
TailleMoyenne_Image.src = "pictures/Taille_Moyenne.png";
TaillePetite_Image.onload = function() { resourceLoaded();
}
TaillePetite_Image.src = "pictures/Taille_Petite.png";
TailleMini_Image.onload = function() { resourceLoaded();
}
TailleMini_Image.src = "pictures/Taille_Mini.png";
crayonBackgroundImage.onload = function() { resourceLoaded();
}
crayonBackgroundImage.src = "images/crayon-background.png";
markerBackgroundImage.onload = function() { resourceLoaded();
}
markerBackgroundImage.src = "images/crayon-background.png";
eraserBackgroundImage.onload = function() { resourceLoaded();
}
eraserBackgroundImage.src = "pictures/gomme.png";
crayonTextureImage.onload = function() { resourceLoaded();
}
crayonTextureImage.src = "images/crayon-texture.png";
outlineImage.onload = function() { resourceLoaded();
}
outlineImage.src = "pictures/Wall01.png";
// 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")
{
// Draw the crayon tool background
context.drawImage(Gomme_Image, 803 , 79);
context.drawImage(Pinceau_Image, 783 , 199 );
context.drawImage(TailleGrande_Image, 845 , 323 );
context.drawImage(TailleMoyenne_Image, 857, 417 );
context.drawImage(TaillePetite_Image, 865 , 491 );
context.drawImage(TailleMini_Image, 873 , 549 );
context.drawImage(crayonBackgroundImage, 272, 51, drawingAreaWidth, drawingAreaHeight);
// Vert Clair
(curColor == colorVert) ? 18 : 52;
if(curColor == colorVert){
context.drawImage(VertImage, PosX, PosY, mediumImageWidth, mediumImageHeight);
}else{
context.drawImage(VertImage, PosX, PosY, mediumImageHeight, mediumImageHeight);
}
// Jaune
(curColor == colorJaune) ? 18 : 52;
if(curColor == colorJaune){
context.drawImage(JauneImage, PosX , Ecart + PosY, mediumImageWidth, mediumImageHeight);
}else{
context.drawImage(JauneImage, PosX , Ecart + PosY, mediumImageWidth, mediumImageHeight);
}
// Orange
(curColor == colorOrange) ? 18 : 52;
if(curColor == colorOrange){
context.drawImage(OrangeImage, PosX, Ecart * 2 + PosY, mediumImageWidth, mediumImageHeight);
}else{
context.drawImage(OrangeImage, PosX, Ecart * 2 + PosY, mediumImageWidth, mediumImageHeight);
}
// Rose
(curColor == colorRose) ? 18 : 52;
if(curColor == colorRose){
context.drawImage(RoseImage, PosX, Ecart * 3 + PosY, mediumImageWidth, mediumImageHeight);
}else{
context.drawImage(RoseImage, PosX, Ecart * 3 + PosY, mediumImageWidth, mediumImageHeight);
}
// Mauve
(curColor == colorMauve) ? 18 : 52;
if(curColor == colorMauve){
context.drawImage(MauveImage, PosX, Ecart * 4 + PosY, mediumImageWidth, mediumImageHeight);
}else{
context.drawImage(MauveImage, PosX, Ecart * 4 + PosY, mediumImageWidth, mediumImageHeight);
}
// Bleu Clair
(curColor == colorBleuClair) ? 18 : 52;
if(curColor == colorBleuClair){
context.drawImage(BleuClairImage, PosX, Ecart * 5 + PosY, mediumImageWidth, mediumImageHeight);
}else{
context.drawImage(BleuClairImage, PosX, Ecart * 5 + PosY, mediumImageWidth, mediumImageHeight);
}
// Brun
(curColor == colorBrun) ? 18 : 52;
if(curColor == colorBrun){
context.drawImage(BrunImage, PosX, Ecart * 6 + PosY, mediumImageWidth, mediumImageHeight);
}else{
context.drawImage(BrunImage, PosX, Ecart * 6 + PosY, mediumImageWidth, mediumImageHeight);
}
// blanc
(curColor == colorBlanc) ? 18 : 52;
if(curColor == colorBlanc){
context.drawImage(BlancImage, PosX, Ecart * 7 + PosY, mediumImageWidth, mediumImageHeight);
}else{
context.drawImage(BlancImage, PosX, Ecart * 7 + PosY, mediumImageWidth, mediumImageHeight);
}
// Vert FoncŽ
(curColor == colorVertFonce) ? 18 : 52;
if(curColor == colorVertFonce){
context.drawImage(VertFonceImage, PosX + 79, PosY, mediumImageWidth, mediumImageHeight);
}else{
context.drawImage(VertFonceImage, PosX + 79, PosY, mediumImageWidth, mediumImageHeight);
}
// Jaunes FoncŽ
(curColor == colorJauneFonce) ? 18 : 52;
if(curColor == colorJauneFonce){
context.drawImage(JauneFonceImage, PosX + 79, Ecart + PosY, mediumImageWidth, mediumImageHeight);
}else{
context.drawImage(JauneFonceImage, PosX + 79, Ecart + PosY, mediumImageWidth, mediumImageHeight);
}
// Rouge
(curColor == colorRouge) ? 18 : 52;
if(curColor == colorRouge){
context.drawImage(RougeImage, PosX + 79, Ecart * 2 + PosY, mediumImageWidth, mediumImageHeight);
}else{
context.drawImage(RougeImage, PosX + 79, Ecart * 2 + PosY, mediumImageWidth, mediumImageHeight);
}
// Rose FoncŽ
(curColor == colorRoseFonce) ? 18 : 52;
if(curColor == colorRoseFonce){
context.drawImage(RoseFonceImage, PosX + 79, Ecart * 3 + PosY, mediumImageWidth, mediumImageHeight);
}else{
context.drawImage(RoseFonceImage, PosX + 79, Ecart * 3 + PosY, mediumImageWidth, mediumImageHeight);
}
// Mauve foncŽ
(curColor == colorMauveFonce) ? 18 : 52;
if(curColor == colorMauveFonce){
context.drawImage(MauveFonceImage, PosX + 79, Ecart * 4 + PosY, mediumImageWidth, mediumImageHeight);
}else{
context.drawImage(MauveFonceImage, PosX + 79, Ecart * 4 + PosY, mediumImageWidth, mediumImageHeight);
}
// Bleu foncŽ
(curColor == colorBleuFonce) ? 18 : 52;
if(curColor == colorBleuFonce){
context.drawImage(BleuFonceImage, PosX + 79, Ecart * 5 + PosY, mediumImageWidth, mediumImageHeight);
}else{
context.drawImage(BleuFonceImage, PosX + 79, Ecart * 5 + PosY, mediumImageWidth, mediumImageHeight);
}
// Gris
(curColor == colorGris) ? 18 : 52;
if(curColor == colorGris){
context.drawImage(GrisImage, PosX + 79, Ecart * 6 + PosY, mediumImageWidth, mediumImageHeight);
}else{
context.drawImage(GrisImage, PosX + 79, Ecart * 6 + PosY, mediumImageWidth, mediumImageHeight);
}
// Noir
(curColor == colorNoir) ? 18 : 52;
if(curColor == colorNoir){
context.drawImage(NoirImage, PosX + 79, Ecart * 7 + PosY, mediumImageWidth, mediumImageHeight);
}else{
context.drawImage(NoirImage, PosX + 79, Ecart * 7 + PosY, mediumImageWidth, mediumImageHeight);
}
}
else if(curTool == "eraser")
{
context.drawImage(Gomme_Image, 803 , 79);
context.drawImage(Pinceau_Image, 783 , 199 );
context.drawImage(TailleGrande_Image, 845 , 323 );
context.drawImage(TailleMoyenne_Image, 857, 417 );
context.drawImage(TaillePetite_Image, 865 , 491 );
context.drawImage(TailleMini_Image, 873 , 549 );
context.drawImage(crayonBackgroundImage, 272, 51, drawingAreaWidth, drawingAreaHeight);
if(curColor == colorVert){
context.drawImage(VertImage, PosX, PosY, mediumImageWidth, mediumImageHeight);
}else{
context.drawImage(VertImage, PosX, PosY, mediumImageHeight, mediumImageHeight);
}
// Jaune
(curColor == colorJaune) ? 18 : 52;
if(curColor == colorJaune){
context.drawImage(JauneImage, PosX , Ecart + PosY, mediumImageWidth, mediumImageHeight);
}else{
context.drawImage(JauneImage, PosX , Ecart + PosY, mediumImageWidth, mediumImageHeight);
}
// Orange
(curColor == colorOrange) ? 18 : 52;
if(curColor == colorOrange){
context.drawImage(OrangeImage, PosX, Ecart * 2 + PosY, mediumImageWidth, mediumImageHeight);
}else{
context.drawImage(OrangeImage, PosX, Ecart * 2 + PosY, mediumImageWidth, mediumImageHeight);
}
// Rose
(curColor == colorRose) ? 18 : 52;
if(curColor == colorRose){
context.drawImage(RoseImage, PosX, Ecart * 3 + PosY, mediumImageWidth, mediumImageHeight);
}else{
context.drawImage(RoseImage, PosX, Ecart * 3 + PosY, mediumImageWidth, mediumImageHeight);
}
// Mauve
(curColor == colorMauve) ? 18 : 52;
if(curColor == colorMauve){
context.drawImage(MauveImage, PosX, Ecart * 4 + PosY, mediumImageWidth, mediumImageHeight);
}else{
context.drawImage(MauveImage, PosX, Ecart * 4 + PosY, mediumImageWidth, mediumImageHeight);
}
// Bleu Clair
(curColor == colorBleuClair) ? 18 : 52;
if(curColor == colorBleuClair){
context.drawImage(BleuClairImage, PosX, Ecart * 5 + PosY, mediumImageWidth, mediumImageHeight);
}else{
context.drawImage(BleuClairImage, PosX, Ecart * 5 + PosY, mediumImageWidth, mediumImageHeight);
}
// Brun
(curColor == colorBrun) ? 18 : 52;
if(curColor == colorBrun){
context.drawImage(BrunImage, PosX, Ecart * 6 + PosY, mediumImageWidth, mediumImageHeight);
}else{
context.drawImage(BrunImage, PosX, Ecart * 6 + PosY, mediumImageWidth, mediumImageHeight);
}
// blanc
(curColor == colorBlanc) ? 18 : 52;
if(curColor == colorBlanc){
context.drawImage(BlancImage, PosX, Ecart * 7 + PosY, mediumImageWidth, mediumImageHeight);
}else{
context.drawImage(BlancImage, PosX, Ecart * 7 + PosY, mediumImageWidth, mediumImageHeight);
}
// Vert FoncŽ
(curColor == colorVertFonce) ? 18 : 52;
if(curColor == colorVertFonce){
context.drawImage(VertFonceImage, PosX + 79, PosY, mediumImageWidth, mediumImageHeight);
}else{
context.drawImage(VertFonceImage, PosX + 79, PosY, mediumImageWidth, mediumImageHeight);
}
// Jaunes FoncŽ
(curColor == colorJauneFonce) ? 18 : 52;
if(curColor == colorJauneFonce){
context.drawImage(JauneFonceImage, PosX + 79, Ecart + PosY, mediumImageWidth, mediumImageHeight);
}else{
context.drawImage(JauneFonceImage, PosX + 79, Ecart + PosY, mediumImageWidth, mediumImageHeight);
}
// Rouge
(curColor == colorRouge) ? 18 : 52;
if(curColor == colorRouge){
context.drawImage(RougeImage, PosX + 79, Ecart * 2 + PosY, mediumImageWidth, mediumImageHeight);
}else{
context.drawImage(RougeImage, PosX + 79, Ecart * 2 + PosY, mediumImageWidth, mediumImageHeight);
}
// Rose FoncŽ
(curColor == colorRoseFonce) ? 18 : 52;
if(curColor == colorRoseFonce){
context.drawImage(RoseFonceImage, PosX + 79, Ecart * 3 + PosY, mediumImageWidth, mediumImageHeight);
}else{
context.drawImage(RoseFonceImage, PosX + 79, Ecart * 3 + PosY, mediumImageWidth, mediumImageHeight);
}
// Mauve foncŽ
(curColor == colorMauveFonce) ? 18 : 52;
if(curColor == colorMauveFonce){
context.drawImage(MauveFonceImage, PosX + 79, Ecart * 4 + PosY, mediumImageWidth, mediumImageHeight);
}else{
context.drawImage(MauveFonceImage, PosX + 79, Ecart * 4 + PosY, mediumImageWidth, mediumImageHeight);
}
// Bleu foncŽ
(curColor == colorBleuFonce) ? 18 : 52;
if(curColor == colorBleuFonce){
context.drawImage(BleuFonceImage, PosX + 79, Ecart * 5 + PosY, mediumImageWidth, mediumImageHeight);
}else{
context.drawImage(BleuFonceImage, PosX + 79, Ecart * 5 + PosY, mediumImageWidth, mediumImageHeight);
}
// Gris
(curColor == colorGris) ? 18 : 52;
if(curColor == colorGris){
context.drawImage(GrisImage, PosX + 79, Ecart * 6 + PosY, mediumImageWidth, mediumImageHeight);
}else{
context.drawImage(GrisImage, PosX + 79, Ecart * 6 + PosY, mediumImageWidth, mediumImageHeight);
}
// Noir
(curColor == colorNoir) ? 18 : 52;
if(curColor == colorNoir){
context.drawImage(NoirImage, PosX + 79, Ecart * 7 + PosY, mediumImageWidth, mediumImageHeight);
}else{
context.drawImage(NoirImage, PosX + 79, Ecart * 7 + PosY, mediumImageWidth, mediumImageHeight);
}
}
if(curSize == "small"){
locX 873, locY 549;
}else if(curSize == "normal"){
locX 865, locY 491;
}else if(curSize == "large"){
locX 857, locY 417;
}else if(curSize == "huge"){
locX 845, locY 323;
}
// 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);
}
/**/
Afficher la suite
