J'ai cherché ce script toute la journée. Est-ce que quelqu'un connaît un tel script que je peux utiliser pour faire pivoter une image en utilisant l'événement de glisser de la souris. en utilisant javascript.Image rotator utilisant l'événement de glisser de la souris en Javascript
merci d'avance.
Voilà. voici ma solution, il fonctionne uniquement avec IE pour la version FF vous trouvez ce qui équivaut à des objets VML dans les navigateurs FF et autres:
<META HTTP-EQUIV="MSThemeCompatible" CONTENT="yes">
<HEAD>
<script>
var dragok = false;
var gotElementSelected = false;
var currentElement = null;
function move()
{
if (dragok)
{
tempX = event.clientX + document.body.scrollLeft;
tempY = event.clientY + document.body.scrollTop;
//rotating
document.getElementById(currentElement).style.rotation=tempX+tempY;
return false;
}
}
function down(){
dragok = true;
if(gotElementSelected && currentElement !=null)
{
document.onmousemove = move;
return false;
}
}
function up()
{
if(gotElementSelected && currentElement !=null)
{
gotElementSelected = false;
dragok = false;
document.onmousemove = null;
currentElement = null;
}
}
</script>
<STYLE>.rvml {
BEHAVIOR: url(#default#VML)
}
</STYLE>
</HEAD>
<BODY bgcolor=DDDDDD>
<?xml:namespace prefix = rvml ns = "urn:schemas-microsoft-com:vml" />
<rvml:image style="POSITION: absolute; WIDTH: 100px; DISPLAY: none; HEIGHT: 100px; TOP: 100px; LEFT:100px; rotation: 0" id=myimage class=rvml
onmousedown="gotElementSelected=true; currentElement=this.attributes.getNamedItem('id').value; selectedElement=currentElement;"
onclick="select_element(this.attributes.getNamedItem('id').value); selectedElement=this.attributes.getNamedItem('id').value;"
src = "path/to/your/image" coordsize = "21600,21600"></rvml:image>
Généralement c'est ce que jQueryRotate fait - utilise VML pour IE, canvas pour firefox, css3 pour les navigateurs modernes - donc vous n'avez pas à vous soucier de coder toutes ces choses folles, utilisez simplement .rotate sur les événements appropriés. :) – Wilq32
Je le sais mais jQueryRotate n'est pas implémenté comme je le voulais. donc je devais le faire moi-même .. – SolidSnake
Essayez ceci:
cela fait pivoter l'image par des valeurs. Je dois le faire pivoter lorsque je fais glisser l'image avec la souris. – SolidSnake
@ emac2014 C'est quand vous utilisez vos compétences en programmation pour sauver la journée. Croyez-moi, c'est aussi bon que ça. – quantumSoup
comment puis-je connecter un événement de glisser avec ceci? pouvez-vous montrer un échantillon .. – SolidSnake
J'ai une idée de implmentation, comme je vais devoir écrire aussi celui-ci, sauf si vous avez déjà une solution, donc je voudrais avoir:)
de toute façon, faire ceci:
/** edit: retiré mon pseudo-code en faveur pour le vrai avant **/
de toute façon ... Je ll mettre en œuvre ceci et vous le faire savoir. à moins bien sûr, au cours des prochaines heures quelqu'un va envoyer sa mise en œuvre :-) /** edit: merci pour ceux qui ont **/
MISE À JOUR: ici il est, de toute façon (rotation d'une image au-dessus un autre :) cela fonctionne très bien, jsut faire un peu de nettoyage si vous importez ce. c'est le navigateur croisé.
html:
<div id="centered" style=" /* margin-left:400px; computed in javacript*/ ">
<img id="static" src="" style="position:absolute; z-index:-1">
<img id="rotating" src="" >
</div>
comprennent:
// jquery.min.js, jQueryRotate.js (discussed above)
javascript:
var alpha=0
var dragOrig = null
var mouseInPic = new Point(0,0)
var diff
var imageNo = 0
function swapImage_or_something(i /* or get src from somewhere else*/) {
$("#static").attr("src", arrCfgImages[i].src)
$("#rotating").attr("src", arrCfgImages[i].src)
$("#static").height(450);
$("#rotating").height(450);
$("#centered").css ({
"margin-left": ($(document).width()-$("#static").width())/2
})
$("#rotating").rotate(0)
}
function doEventBinding() {
$(document).bind("mousedown", function (e) {
dragOrig = new Point (mouseInPic.x, mouseInPic.y)
e.preventDefault()
return
});
$(document).bind("mouseup", function (e) {
if (dragOrig) {
dragOrig = null
alpha+=diff
diff=0
}
});
$(document).bind("mousemove", function (e) {
var x = -1*(Math.round($("#rotating").width()/2+0.01) - (e.pageX - $("#rotating").offset().left - (isIE ? 2 : 0)))
var y = Math.round($("#rotating").height()/2+0.01) - (e.pageY - $("#rotating").offset().top - (isIE ? 2 : 0))
mouseInPic = new Point(x,y)
if (dragOrig) {
var cp = new Point(0,0)
var deg1 = getAngleBetweenPoints(dragOrig, cp)
var deg2 = getAngleBetweenPoints(mouseInPic, cp)
diff = (deg1-deg2)
diff = diff<0 ? diff+360 : diff>360 ? diff-360 : diff
diff = diff>180 ? diff-360 : diff
//my$("debug").innerHTML = diff
$('#rotating').rotate(alpha+diff);
e.preventDefault()
}
});
}
aussi:
var toRAD = 1/180*Math.PI;
var toDEG = 180/Math.PI;
function getAngle(dx,dy) {
var ang
if (dx!=0) {
var rad = Math.atan(dy/dx) + (dx<0?Math.PI:0)
ang = rad*toDEG
if (ang<0) ang+=360;
} else {
ang = dy>0 ? 90 : 270;
}
return ang;
}
function getAngleBetweenPoints (p1, p2) {
var dx = p1.x-p2.x
var dy = p1.y-p2.y
return getAngle (dx, dy)
}
bien que j'ai utilisé vml pour effectuer la rotation de l'image. Cela fonctionne avec IE seulement. Je me fichais de FF ou d'autres navigateurs. – SolidSnake
@RobinVanPersi Wow! – Exception
GreenSock a une fonctionnalité de spin fantaisie Bery. Regardez: https://www.greensock.com/draggable/ Faites défiler pour faire tourner. Malheureusement, ce n'est pas complètement gratuit.
Voulez-vous dire faire pivoter une image le long de son axe z? – quantumSoup
Je le pense .. Rotation 2D .. – SolidSnake