Bild-rotator mit der Maus per drag-Ereignis in Javascript

Ich habe lange gesucht für dieses Skript den ganzen Tag.
kennt jemand solche script, dass ich verwenden können, um ein Bild zu drehen mit der Maus per drag event. mit javascript.

vielen Dank im Voraus.

Meinst du das Bild drehen entlang der z-Achse?
Ich denke so.. 2D-rotation..

InformationsquelleAutor SolidSnake | 2010-07-17

  1. 2

    Versuchen Sie dies:

    http://code.google.com/p/jqueryrotate/

    dieser dreht das Bild durch die Werte. Ich muss es gedreht werden, wenn ich ziehen Sie das Bild mit der Maus..
    Das ist, wenn Sie Ihre Programmierkenntnisse an den Tag zu retten. Vertrauen Sie mir, dies ist so gut wie es geht.
    wie kann ich eine Drag event? können Sie ein Beispiel..
    Überprüfen Sie jetzt die Seite, ich aktualisierte Beispiele / Demo-Seite. Drag-Ereignis in JavaScript erfolgt in Erster Linie durch die Kontrolle MouseMove und MouseDown-Ereignisse. Binden Sie Sie auf eine rotation Bild und die Basis auf eine Strecke der Bewegung, den Winkel festzulegen. Als QuantumSoup gesagt - das ist eine Frage der Programmierung - plugin bietet Ihnen die Möglichkeit, sich zu drehen. Seine bis zu Ihnen, Wann und wie Sie es drehen

    InformationsquelleAutor quantumSoup

  2. 0

    Habe ich eine-Implementierung Ahnung, wie ich werde müssen schreiben diese auch, sofern Sie bereits eine Lösung haben, so möchte ich es haben 🙂

    sowieso, dies zu tun:

    /** edit: entfernt, mein pseudo-code in der Gunst der real vor **/

    trotzdem... ich werde diese umsetzen und Sie wissen lassen.
    es sei denn natürlich, während der nächsten Stunden einige wird senden seine Umsetzung 🙂
    /** edit: vielen Dank für diejenigen, die haben **/

    UPDATE:
    hier ist es jedenfalls (drehen sich ein Bild über ein anderes:)
    es funktioniert großartig, einfach nur tun, ein wenig Aufräumen, wenn Sie importieren.
    es ist cross-browser -.

    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>

    gehören:

    //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() 
        }
    });

}

    auch: 

    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)
    }
    nun, ich verwendet, vml, führen Sie die Drehung. Es funktioniert mit dem IE nur. Ich habe keine sorgen über FF oder anderen Browsern.
    Wow!!!

    InformationsquelleAutor alfred

  3. 0

    Greensock hat ein bery Lust spin-Funktionalität. Haben Sie einen Blick auf:
    https://www.greensock.com/draggable/
    Blättern Sie nach unten zu drehen.
    Leider ist es nicht completelt kostenlos.

    InformationsquelleAutor arpo

  4. -1

    Dort gehen Sie. hier ist meine Lösung, es funktioniert nur mit dem IE zum FF-version, finden Sie heraus, was ist äquivalent zu vml-Objekte in FF und anderen Browsern:

    <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>
    In der Regel ist dies, was jQueryRotate hat - nutzt VML für den IE, Leinwand für firefox, css3 für moderne Browser - so müssen Sie dont care über die Codierung all dieses verrückte Zeug, einfach nur einfach .drehen Sie auf der richtigen Veranstaltungen. 🙂
    Ich weiß, aber jQueryRotate ist nicht implementiert, wie ich wollte. also musste ich es selber tun..

    InformationsquelleAutor SolidSnake

Schreibe einen Kommentar