Accueil > Forum > > > > WebApp Ipad Html5, Canvas Javascript
 WebApp Ipad Html5, Canvas Javascript
jeudi 9 juin 2011 à 18:03:13 |
WebApp Ipad Html5, Canvas Javascript
ezzza
|
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
Code Javascript :
// 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);
}
/**/ |
|
vendredi 10 juin 2011 à 10:15:37 |
Re : WebApp Ipad Html5, Canvas Javascript
dmuller
|
Bonjour ezzza,
Pour gérer le mouvement des doigts, pense à intégrer la librairie JQuery Mobile. Tu y trouveras, entre autres, la méthode swipe (glissement d'un doigt).
Cordialement,
BadGuitarist.
|
|
samedi 11 juin 2011 à 10:18:47 |
Re : WebApp Ipad Html5, Canvas Javascript
ezzza
|
Je ne trouve pas comment je pourrai changer meme pour un Jquery Mobile, je suis un débutant en Javascript donc je ne vois pas trop comment :s
|
|
Cette discussion est classée dans : var, context, drawimage, mediumimageheight, curcolor
 Répondre à ce message
 Sujets en rapport avec ce message
Code javascript ne fonctionne pas sur firefox [ par ezzza ]
Bonjour, Je suis débutante en javascript et je dois réaliser un pong en javascript. J'y suis arrivée grâce à un tuto et après de nombreuses difficult
Deux javascripts identique dans une même page [ par guerrilleur ]
Voila je voudrai avoir de fois le même javascript sur ma page. voici mon code actuel: [code=html] --> /***************
Diaporama image avec fondu enchainé, lien vers page, etdiapo suit scroll de page [ par nonosims ]
salut a tous, je viens vous solliciter pour vous expliquer mon problème. Débutant en script, j'essaye de mettre en place, un bandeau vertical à droite
Constructeur Ajax dans classe javascript [ par TheGorgo ]
Bonjour, Je cherche à créer des classes javascript avec deux constructeurs. L'un d'eux est un à partir objet documentElement (facile). Pour l'autre c
Aide compte a rebour [ par DeXiTbe ]
Bonjour a tous, Je vient vers vous car mes compétences sont limité et je bloque sur un script de compte a rebour. J'ai essayer de modifier le script
Prototype/Scriptaculous && Background-position [ par DakM ]
Bonjour ! J'ai ce calque: [code=js]var div = new Element('div', {'id': this._id, 'class': css.map.container, 'style': 'display:none; width: 100%; hei
Récupérer données dans une Popup [ par kyoku59 ]
Bonjour Voilà je suis face à un problème qui est de récupérer des données de la popup vers la page mère (dans une balise textarea) J'ai trouvé plusi
Mise en forme tableau javascript [ par bridierb ]
Bonjour, J'ai créé un tableau d'entiers sous javascript auquel j"ai ajouté une fonction inverse. Cette fonction m'affiche bien mon tableau inversé mai
Probleme XMLhttpRequest safari/Chrome [ par ju0123456789 ]
Bonjour, cela fait maintenant 6 mois que je bloque sur un truc dont je n'ai toujours pas trouvé la solution. J'ai une fonction javascript avec requete
Modif dans script pour galerie [ par htaine ]
Bonjour à tous, je sollicite votre aide pour un petit détail qui me chagrine. J'ai un script pour une galerie photo, tout est OP, sauf qu'au lieu d'af
 Livres en rapport
|
Derniers Blogs
 POUR RAPPEL ! LES SPéCIFICATIONS DES PROTOCOLES OFFICE ET SHAREPOINT SONT DISPONIBLES SUR MSDNPOUR RAPPEL ! LES SPéCIFICATIONS DES PROTOCOLES OFFICE ET SHAREPOINT SONT DISPONIBLES SUR MSDN par neodante
Quelle est le point commun entre : Microsoft il y a 10 ans et Apple aujourd'hui ? Réponse: avoir une politique de protocoles propriétaires et fermés :) Car pour rappel (si si je vous assure c'est important de le rappeler), la majorité des spécifications e...
Cliquez pour lire la suite de l'article par neodante JOYEUX ANNIVERSAIRE NIXJOYEUX ANNIVERSAIRE NIX par ebartsoft
Souhaitons un bon et joyeux anniversaire à notre hôte à tous, Nix.
Je ne le répéterais jamais assez mais sans lui rien ne serait possible. Il défit en permanence les lois de la gravité et comme il le dit si bien, si tu lui fais confiance ça devra...
Cliquez pour lire la suite de l'article par ebartsoft IMAGINE CUP 2012, MAKE A SIGN EN FINALEIMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg
Voilà qui est fait, la nouvelle est officielle ! L'équipe belge "Make a Sign" va au pays des kangourous défendre son projet dans la catégorie Software Design. http://www.imaginecup.com/CompetitionsContent/Competition/WorldwideFinalists.aspx V...
Cliquez pour lire la suite de l'article par junarnoalg KINECT 1.5 IS OUT !KINECT 1.5 IS OUT ! par Vko
La version 1.5 du Kinect For Microsoft vient tout juste de sortir ! Plein de nouveautés: Tracking de squelette en Near Mode Détection en position assise Détection faciale avec un SDK dédié Documentation et des guideline (enfin) Un out...
Cliquez pour lire la suite de l'article par Vko LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc
Mise à jour des Web API du 14 Mai
Réservez dès maintenant votre journée du 20 juin pour le Windows Azure Dev Camp 2012 à Paris
Mise à jour de Team Foundation Service
MechCommander 2 sur Windows 8
Entity Framework 5 Release Candidate e...
Cliquez pour lire la suite de l'article par richardc
Logiciels
 sDEVIS-FACTURES vlPRO (8.1.0.3)SDEVIS-FACTURES VLPRO (8.1.0.3)sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa... Cliquez pour télécharger sDEVIS-FACTURES vlPRO 974 Application Server (12.2.4.6)974 APPLICATION SERVER (12.2.4.6)Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc... Cliquez pour télécharger 974 Application Server vPicture (1.4.2.1)VPICTURE (1.4.2.1)Avec vPicture, hébergez vos images facilement et rapidement.
vPicture est un utilitaire simple, ... Cliquez pour télécharger vPicture Easy-Planning (2.2.1.6)EASY-PLANNING (2.2.1.6)Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au... Cliquez pour télécharger Easy-Planning COM-BACKUP (2.0)COM-BACKUP (2.0)
COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...
Cliquez pour télécharger COM-BACKUP
|