Bonjour,
je me suis fais une petite carte de voeux en exploitant les canvas mais voilà celle-ci fonctionne mal sur chrome et safari, que ce soit au trackpad ou à la souris. Aucun problème sur firefox et Opéra. Aucun problème également sur Iphone (sous chrome et safari). Du coup je me demandais s'il y'a une syntaxe spécial pour les canvas selon le browser mais je n'ai rien trouvé sur le net. Je pense que le problème vient peut-être des coordonnées mais là je bloque. Je sais pas quoi faire, désolé pour le code entier.
mon js :
Et mon Htm :
Modifié par bgekun (17 Jan 2013 - 21:04)
je me suis fais une petite carte de voeux en exploitant les canvas mais voilà celle-ci fonctionne mal sur chrome et safari, que ce soit au trackpad ou à la souris. Aucun problème sur firefox et Opéra. Aucun problème également sur Iphone (sous chrome et safari). Du coup je me demandais s'il y'a une syntaxe spécial pour les canvas selon le browser mais je n'ai rien trouvé sur le net. Je pense que le problème vient peut-être des coordonnées mais là je bloque. Je sais pas quoi faire, désolé pour le code entier.
mon js :
var debugtxt = null;
var canvas1 = null;
var canvas2 = null;
var canvas3 = null;
var color1 = "#1478BD";
var color2 = "#174093";
var color3 = "#174093";
var justBorn = true;
var debugString = "";
var isInIPhone = false;
//var isIPhone = (new RegExp( "iPhone", "i" )).test(navigator.userAgent);
//-----------------------------------------------------------
var onTouchStart = function( obj, event ){
event.preventDefault();
var touch = getTouchEvent( event );
var localPosition = getCanvasLocalCoordinates(obj, touch.pageX,touch.pageY);
lastPenPoint = {x: localPosition.x, y: localPosition.y};
obj.bind((isInIPhone ? "touchmove" : "mousemove"), function( event ){
onTouchMove( obj, event );
return( false );
});
obj.bind((isInIPhone ? "touchend" : "mouseup"), function( event ){
onTouchEnd( obj, event );
return( false );
});
};
//-----------------------------------------------------------
var onTouchMove = function( obj, event ){
debugString = "";//ddebugString;
var touch = getTouchEvent( event );
debugString += "touchEvent=" + touch.type + "<br/>";
console.log(event);
debugString += "Event=" + event + "<br/>";
var localPosition = getCanvasLocalCoordinates(obj, touch.pageX,touch.pageY);
debugString += "localPosition=" + localPosition.x + " " + localPosition.y + "<br/>";
lastPenPoint = {x: localPosition.x, y: localPosition.y};
var div = obj.parent();
//var color = div.data('color') ? div.data('color') : "#91c2ff";
var color = getColor(obj);
var l = getLeftCoordinate(obj);
var h = getTopCoord(obj);
debugString += "left coordinate=" + l + "<br/>";
var x = touch.pageX - l - (obj.width() / 2);
//var y = event.pageY - 50 - (obj.height() / 2);
var y = touch.pageY - h - (obj.height() / 2);
var a = Math.atan2(x, -y) / (2 * Math.PI);
debugString += "x=" + x + "<br/>" + "y=" + y + "<br/>" + "a=" + a;
debugtxt.html(debugString);
drawCircle(obj, a, color);
drawValue(obj, a);
/*/
var ctx = canvas1[0].getContext('2d');
ctx.clearRect(0, 0, 200, 200);
ctx.beginPath();
ctx.arc(100, 100, 85, -1 / 2 * Math.PI, a * 2 * Math.PI - 1 / 2 * Math.PI);
ctx.lineWidth = 20;
ctx.strokeStyle = color;
ctx.stroke();
*/
};
//-----------------------------------------------------------
var onTouchEnd = function( obj, event ){
obj.unbind((isInIPhone ? "touchmove" : "mousemove"));
obj.unbind((isInIPhone ? "touchend" : "mouseup"));
};
//-----------------------------------------------------------
function getTopCoord(obj) {
var c = $("#container").position().top;
return (c);
}
function getLeftCoordinate(obj){
var l = 0;
var c = $("#container").position().left;
switch(obj.attr("id")){
case "center1" :
$("#fleche1").hide();
l = c + 50;
break;
case "center2" :
$("#fleche2").hide();
l = c + 350;
break;
case "center3" :
$("#fleche3").hide();
l = c + 650;
break;
}
return(l);
}
//-----------------------------------------------------------
function getColor(obj){
var color = "#FF0000";
switch(obj.attr("id")){
case "center1" :
color = "#1478BD";
break;
case "center2" :
color = "#174093";
break;
case "center3" :
color = "#F08300";
break;
}
return(color);
}
//-----------------------------------------------------------
function drawCircle(obj, angle, color, contour){
var ctx = obj[0].getContext('2d');
ctx.clearRect(0, 0, 200, 200);
// Et on redessine le cercle
ctx.beginPath();
ctx.arc(100, 100, 85, -1 / 2 * Math.PI, angle * 2 * Math.PI - 1 / 2 * Math.PI);
ctx.lineWidth = contour;
ctx.strokeStyle = color;
ctx.stroke();
}
//-----------------------------------------------------------
function drawValue(obj, a){
var s = obj.parent().children("input").attr("id");
switch (s) {
case "circle1":
if ((a > 0.2) && (a < 0.3)) {
$("#txt1").html("bonne");
}
else {
$("#txt1").html(getWord(5));
}
break;
case "circle2":
if ((a > -0.3) && (a < -0.2)) {
$("#txt2").html("annÉe");
}
else {
$("#txt2").html(getWord(5));
}
break;
case "circle3":
if ((a > 0.1) && (a < 0.2)) {
$("#txt3").html("2013");
}
else {
$("#txt3").html(getNumber(4));
}
}
}
//-----------------------------------------------------------
function getWord(charsNumber) {
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
for (var i = 0; i < charsNumber; i++)
text += possible.charAt(Math.floor(Math.random() * possible.length));
return text;
}
//-----------------------------------------------------------
function getNumber(charsNumber) {
var text = "";
var possible = "1234567890";
for (var i = 0; i < charsNumber; i++)
text += possible.charAt(Math.floor(Math.random() * possible.length));
return text;
}
//-----------------------------------------------------------
var getCanvasLocalCoordinates = function( obj, pageX, pageY ){
// Get the position of the canvas.
var position = obj.offset();
// Translate the X/Y to the canvas element.
return({x: (pageX - position.left), y: (pageY - position.top) });
};
//-----------------------------------------------------------
var getTouchEvent = function( event ){
return(isInIPhone ? window.event.targetTouches[ 0 ] : event );
};
$(document).ready(function (){
//var isIPhone = new RegExp( "[iPhone]", "i" );
//isInIPhone = (navigator.userAgent.match(isIPhone));
//
debugtxt = $("#debug");
if (navigator.userAgent.match(/iPhone/i))
isInIPhone = true;
debugtxt.html("Is IPhone : " + isInIPhone);
canvas1 = $("#center1");
canvas2 = $("#center2");
canvas3 = $("#center3");
//drawCircle(canvas1, 0.3, "#1478BD", 30);
//drawCircle(canvas2, 0.7, "#174093", 20);
//drawCircle(canvas3, 0.15, "#F08300", 10);
drawCircle(canvas1, 0.3, "#1478BD", 30);
drawCircle(canvas2, 0.7, "#174093", 20);
drawCircle(canvas3, 0.15, "#F08300", 10);
canvas1.bind((isInIPhone ? "touchstart" : "mousedown"), function( event ){
onTouchStart( canvas1, event );
return( false );
});
canvas2.bind((isInIPhone ? "touchstart" : "mousedown"), function( event ){
onTouchStart( canvas2, event );
return( false );
});
canvas3.bind((isInIPhone ? "touchstart" : "mousedown"), function( event ){
onTouchStart( canvas3, event );
return( false );
});
});
Et mon Htm :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
<title></title>
<style type="text/css">
body{
margin: 0px;
padding: 0px;
}
div.round{
margin: 50px;
width: 200px; height: 200px;
position: relative;
float: left;
}
div.round input{
position: absolute;
top: 60px; left: 50px;
font-size: 0px; text-align: center;
width: 100px;
border: none; background: none;
outline: none;}
div.round canvas{
position: absolute;
top: 0; left: 0; right:0; bottom: 0;
}
.titre{ color:#1478BD;
text-align: left;
font-family:Helvetica, Arial, sans-serif;
font-style:normal;
line-height:80px;
font-size: 70px;
text-transform : uppercase;
}
.titre2{ color:#174093;
text-align: center;
font-family:Helvetica, Arial, sans-serif;
font-style:normal;
line-height:80px;
font-size: 70px;
text-transform : uppercase;
}
.titre3{ color:#F08300;
text-align: right;
font-family:Helvetica, Arial, sans-serif;
font-style:normal;
line-height:80px;
font-size: 70px;
text-transform : uppercase;
}
.conteneur{
width: 900px;
margin: 0 auto;
}
.contenu1{
width: 300px;
margin: 0 auto;
text-align: center;
float: left;
}
.contenu2{
width: 300px;
margin: 0 auto;
text-align: center;
float: left;
}
.contenu3{
width: 230px;
margin: 0 auto;
text-align:center;
float: left;
}
.fleche{
position:absolute;
left:49px;
width:100px;
height:150px;
top:52px;
z-index:5;
}
.debug{position:absolute;left:100px;top:0;width:100%;height:50px;color:#FF0000;}
</style>
</head>
<body>
<div class="debug" id="debug"></div>
<div class="conteneur" id="container">
<div class="round">
<input id="circle1"type="text" name="round" class="round" data-min="0" data-max="100" value="30"
data-contour="30" data-color="#1478BD"/>
<canvas width="200px" height="200px" id="color1"></canvas>
<canvas width="200px" height="200px" id="center1"></canvas>
<div class="fleche" id="fleche1">
<img src="images/fleche2.gif" alt="" />
</div>
</div>
<div class="round">
<input id="circle2"type="text" name="round2" class="round" data-min="0" data-max="100" value="70" data-color="#174093" data-contour="20"/>
<canvas width="200px" height="200px" id="color2"></canvas>
<canvas width="200px" height="200px" id="center2"></canvas>
<div class="fleche" id="fleche2">
<img src="images/fleche1.gif" alt="" />
</div>
</div>
<div class="round">
<input id="circle3"type="text" name="round" class="round" data-min="0" data-max="100" value="15"
data-color="#F08300" data-contour="10"/>
<canvas width="200px" height="200px" id="color3"></canvas>
<canvas width="200px" height="200px" id="center3"></canvas>
<div class="fleche" id="fleche3">
<img src="images/fleche3.gif" alt="" />
</div>
</div>
<div style="clear: both"></div>
<div class="titre contenu1"id="txt1"></div>
<div class="titre2 contenu2"id="txt2"></div>
<div class="titre3 contenu3"id="txt3"></div>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/carte-voeux.js"></script>
<script type="text/javascript" >
$("#txt1").html(getWord(5));
$("#txt2").html(getWord(5));
$("#txt3").html(getNumber(4));
</script>
</html>
Modifié par bgekun (17 Jan 2013 - 21:04)