raphaeljs: sleep en pas transformatie toe op Paper.set ()

Ik begon een beetje met raphaelj's te spelen, maar ik heb een klein probleempje bij het slepen en toepassen van een transformatie naar een Paper.set ()

Here is my example: http://jsfiddle.net/PQZmp/2/

1) Waarom wordt de sleepgebeurtenis alleen toegevoegd aan de marker en niet aan de schuifregelaar ?

2) De transformatie moet relatief zijn (dat wil zeggen vertalen met en niet vertalen naar ), maar als ik de markering twee keer sleep, de tweede slepen begint vanaf het begin en niet vanaf het einde van de eerste.

EDIT: After the response of Zero, I created a new JSFiddle example: http://jsfiddle.net/9b9W3/1/

1) Het zou gaaf zijn als this verwijst naar de set in plaats van naar het eerste element van de set. Kan dit niet worden gedaan met dragger.apply (slider) ? Ik heb het geprobeerd, maar werkt alleen aan de eerste uitvoering van de methode (misschien wordt er binnen Raphael al aan gedaan, maar aan het eerste element binnen de set in plaats van de set )

2) Volgens Raphael docs moet de transformatie relatief zijn ten opzichte van de positie van het object (bijv. vertalen met en niet vertalen naar ). Maar het is niet wat er gebeurt volgens de bovenstaande jsfiddle (controleer beide sleepers).

3) Dus 2) hierboven creëert een derde vraag. Als een -transformatie ("t30,0") een vertaling met 30px horizontaal is, hoe wordt de oorsprong dan berekend? Gebaseerd op attr ("x") of getBBox (). X ?

2

2 antwoord

De sleepgebeurtenis wordt feitelijk toegevoegd aan zowel de markering als de schuifregelaar, maar uw schuifregelaar heeft een lijnbreedte van 1 en geen vulling, dus tenzij u de exacte rand vangt, valt de klik door naar het canvas.

Daarachter is nog een probleem: de versleping wordt toegepast op beide elementen, maar this in uw sleephandler verwijst naar een specifiek element, niet de set - dus beide elementen zullen slepen onafhankelijk van elkaar.

Ten slotte: de reden dat elke sleep begint vanaf de beginpositie is omdat de dx, dy-parameters in dragger relatief zijn ten opzichte van de coördinaten van de oorspronkelijke sleepgebeurtenis, en uw transformatie houdt geen rekening met eerdere transformaties . Overweeg een alternatief zoals dit:

var r = new Raphael(0, 0, 400, 200);
var marker = r.path("M10,0L10,100").attr({"stroke-width": 5});
var button = r.rect(0, 0, 20, 20, 1).attr( { 'stroke-width': 2, fill: 'white' } );
var slider = r.set( marker, button );

var startx, starty;

var startDrag = function(){
    var bbox = slider.getBBox();
    startx = bbox.x;
    starty = bbox.y;
    console.log(this);
}, dragger = function(dx, dy){
    slider.transform("t" + ( startx + dx ) + "," + starty );
}, endDrag = function(){

};

slider.drag(dragger, startDrag, endDrag);

Om uw updates aan te pakken:

  1. I believe you can specify the context in which the drag function will be executed as optional fourth, fifth, and six parameters to element.drag. I haven't tried this myself, but it looks like this should work great:

    slider.drag( dragger, startDrag, endDrag, slider, slider, slider );

  2. The transformation is relative to the object position. This works great for the first slider because its starting position is 0, but not so great for the second slider because...

  3. ...the transformation for min/max sliders should actually be relative to the scale, not the individual markers. Thus you will notice that your max slider (the red one) returns to its initial position just as you drag the mouse cursor back over the zero position. Make sense?

4
toegevoegd
Bijgewerkt mijn vraag op basis van uw antwoord. Zou je er alsjeblieft iets over willen zeggen?
toegevoegd de auteur ffleandro, de bron
Ik begrijp niet wat je bedoelt. Kunt u een werkend voorbeeld geven?
toegevoegd de auteur ffleandro, de bron
Ik zal het morgen als eerste bekijken, nadat mijn brein opnieuw is opgestart.
toegevoegd de auteur Kevin Nielsen, de bron
    var position;
    var rect = paper.rect(20, 20, 40, 40).attr({
            cursor: "move",
            fill: "#f00",
            stroke: "#000"
    });
    t = paper.text(70,70, 'test').attr({
            "font-size":16, 
            "font-family": 
            "Arial, Helvetica, sans-serif" 
    });
    var st = paper.set();
    st.push(rect, t);
    rect.mySet = st;
    rect.drag(onMove, onStart, onEnd);
    onStart = function() {
        positions = new Array();
        this.mySet.forEach(function(e) {
            var ox = e.attr("x");
            var oy = e.attr("y");
            positions.push([e, ox, oy]);
        });
    }
    onMove = function (dx, dy) {
        for (var i = 0; i < positions.length; i++) {//you can use foreach but I want to
            //show that is a simple array
            positions[i][0].attr({x: positions[i][1] + dx, y: positions[i][2] + dy});
        }
    }
    onEnd = function() {}
0
toegevoegd