FAQ

[Raphaël] raphael 2.0 - the best way to scroll a lot of elements

Łukasz Michalski
Apr 24, 2012 at 6:59 pm
Hi,

I have a raphael based stock chart that I want to scroll.

I paint a lot of "candles" on a chart that are created from rectangle
and a short path.

Now when I need to paint new candle I need to scroll all existing ones
horizontally by fixed amount of pixels.

In 1.2.3 I used translate to do the job, but it adds new translation for
every shift.

In 2.0 now I use transform("...t-32,0") - but I need to append
translation every time too. Without appending my candles were moved only
once.

Is there a more efficient way to move path and rect element horizontally
without attaching a new transformation each time?

Many thanks for any ideas,
Łukasz

--
You received this message because you are subscribed to the Google Groups "Raphaël" group.
To post to this group, send an email to raphaeljs@googlegroups.com.
To unsubscribe from this group, send email to raphaeljs+unsubscribe@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/raphaeljs?hl=en-GB.
reply

Search Discussions

7 responses

  • Sebastian Gurin at Apr 24, 2012 at 7:07 pm
    have you tried using Matrix ?

    var m = aPath.matrix; //make sure aPath has a non empty "transform"
    attribute value
    m.translate(20,30);
    aPath.attr("transform", m.toTransformString());

    this way you do not have to concat strings. hope that helps

    --
    You received this message because you are subscribed to the Google Groups "Raphaël" group.
    To view this discussion on the web, visit https://groups.google.com/d/msg/raphaeljs/-/WY8rSmPq36cJ.
    To post to this group, send an email to raphaeljs@googlegroups.com.
    To unsubscribe from this group, send email to raphaeljs+unsubscribe@googlegroups.com.
    For more options, visit this group at http://groups.google.com/group/raphaeljs?hl=en-GB.
  • Lukasz Michalski at Apr 26, 2012 at 6:45 am

    On 04/24/12 21:07, Sebastian Gurin wrote:
    have you tried using Matrix ?

    var m = aPath.matrix; //make sure aPath has a non empty "transform"
    attribute value
    m.translate(20,30);
    aPath.attr("transform", m.toTransformString());

    this way you do not have to concat strings. hope that helps
    No, I did not, thanks for a pointer. I just discovered that new
    transform() method does not work exactly as old translate.

    In Raphael 1.2.4:

    r = rect(20,20,5,5);
    //this way I scroll
    r.translate(-5,0);
    //this way I repaint when needed
    r.attr({x: 15, y:20, width:10, height:10});

    this pseudo-code created rect at 20,20, then moved it to 15,20.

    It seems that in 2.0 after r.attr() translation is applied again after
    changing coordinates, so my rect is finally moved to (10,20).

    How it works in 2.0 does make more sense to me. Can anyone confirm that
    this is a correct behavior?

    If so, then I think that using transform()/translate() is not a good way
    to implement scrolling. I will have to implement some kind of move() for
    all my elements that will change rect coordinates and set new path
    attributes.

    I would appreciate any comments or suggestions regarding this topic,

    Regards,
    Łukasz


    --
    You received this message because you are subscribed to the Google Groups "Raphaël" group.
    To post to this group, send an email to raphaeljs@googlegroups.com.
    To unsubscribe from this group, send email to raphaeljs+unsubscribe@googlegroups.com.
    For more options, visit this group at http://groups.google.com/group/raphaeljs?hl=en-GB.
  • Sebastian Gurin at Apr 26, 2012 at 5:10 pm
    have you considered / can you use html scrolling ? - that is put the paper
    in a overflow:scroll html container. Something like this:
    http://jsfiddle.net/zXKB7/

    --
    You received this message because you are subscribed to the Google Groups "Raphaël" group.
    To view this discussion on the web, visit https://groups.google.com/d/msg/raphaeljs/-/K5YfGy-7iqoJ.
    To post to this group, send an email to raphaeljs@googlegroups.com.
    To unsubscribe from this group, send email to raphaeljs+unsubscribe@googlegroups.com.
    For more options, visit this group at http://groups.google.com/group/raphaeljs?hl=en-GB.
  • Sebastian Gurin at Apr 26, 2012 at 5:14 pm
    if you cannot use html scrolling (need to scroll at raphael level
    programatically), then you can always "move" the shapes. For cxircles set
    cx/cy attrs, for rect x/y. For paths is more complex. You could use:

    Raphael.mapPath(aPath.attr("path"), aTranslationMatrix)

    see
    http://raphaeljs.com/reference.html#Raphael.mapPath


    On Thursday, April 26, 2012 3:45:04 AM UTC-3, Lukasz wrote:
    On 04/24/12 21:07, Sebastian Gurin wrote:
    have you tried using Matrix ?

    var m = aPath.matrix; //make sure aPath has a non empty "transform"
    attribute value
    m.translate(20,30);
    aPath.attr("transform", m.toTransformString());

    this way you do not have to concat strings. hope that helps
    No, I did not, thanks for a pointer. I just discovered that new
    transform() method does not work exactly as old translate.

    In Raphael 1.2.4:

    r = rect(20,20,5,5);
    //this way I scroll
    r.translate(-5,0);
    //this way I repaint when needed
    r.attr({x: 15, y:20, width:10, height:10});

    this pseudo-code created rect at 20,20, then moved it to 15,20.

    It seems that in 2.0 after r.attr() translation is applied again after
    changing coordinates, so my rect is finally moved to (10,20).

    How it works in 2.0 does make more sense to me. Can anyone confirm that
    this is a correct behavior?

    If so, then I think that using transform()/translate() is not a good way
    to implement scrolling. I will have to implement some kind of move() for
    all my elements that will change rect coordinates and set new path
    attributes.

    I would appreciate any comments or suggestions regarding this topic,

    Regards,
    Łukasz

    --
    You received this message because you are subscribed to the Google Groups "Raphaël" group.
    To view this discussion on the web, visit https://groups.google.com/d/msg/raphaeljs/-/cnP1TPoPyoYJ.
    To post to this group, send an email to raphaeljs@googlegroups.com.
    To unsubscribe from this group, send email to raphaeljs+unsubscribe@googlegroups.com.
    For more options, visit this group at http://groups.google.com/group/raphaeljs?hl=en-GB.
  • Łukasz Michalski at Apr 26, 2012 at 8:32 pm

    W dniu 2012-04-26 19:14, Sebastian Gurin pisze:
    if you cannot use html scrolling (need to scroll at raphael level
    programatically), then you can always "move" the shapes. For cxircles
    set cx/cy attrs, for rect x/y. For paths is more complex. You could use:

    Raphael.mapPath(aPath.attr("path"), aTranslationMatrix)
    Thanks for this info. I just fixed this issue by reseting transform()
    before refreshing an element with new coordinates. Not as elegant as
    yours, but requires less coding.

    Thanks again for your help.
    Łukasz

    --
    You received this message because you are subscribed to the Google Groups "Raphaël" group.
    To post to this group, send an email to raphaeljs@googlegroups.com.
    To unsubscribe from this group, send email to raphaeljs+unsubscribe@googlegroups.com.
    For more options, visit this group at http://groups.google.com/group/raphaeljs?hl=en-GB.
  • Sebastian Gurin at Apr 26, 2012 at 5:16 pm
    also it occurred to me that the attribute "clip-rect" could be of help for
    simulating a scrolling but i'm not sure how...
    On Thursday, April 26, 2012 3:45:04 AM UTC-3, Lukasz wrote:
    On 04/24/12 21:07, Sebastian Gurin wrote:
    have you tried using Matrix ?

    var m = aPath.matrix; //make sure aPath has a non empty "transform"
    attribute value
    m.translate(20,30);
    aPath.attr("transform", m.toTransformString());

    this way you do not have to concat strings. hope that helps
    No, I did not, thanks for a pointer. I just discovered that new
    transform() method does not work exactly as old translate.

    In Raphael 1.2.4:

    r = rect(20,20,5,5);
    //this way I scroll
    r.translate(-5,0);
    //this way I repaint when needed
    r.attr({x: 15, y:20, width:10, height:10});

    this pseudo-code created rect at 20,20, then moved it to 15,20.

    It seems that in 2.0 after r.attr() translation is applied again after
    changing coordinates, so my rect is finally moved to (10,20).

    How it works in 2.0 does make more sense to me. Can anyone confirm that
    this is a correct behavior?

    If so, then I think that using transform()/translate() is not a good way
    to implement scrolling. I will have to implement some kind of move() for
    all my elements that will change rect coordinates and set new path
    attributes.

    I would appreciate any comments or suggestions regarding this topic,

    Regards,
    Łukasz

    --
    You received this message because you are subscribed to the Google Groups "Raphaël" group.
    To view this discussion on the web, visit https://groups.google.com/d/msg/raphaeljs/-/UkjTvczISjUJ.
    To post to this group, send an email to raphaeljs@googlegroups.com.
    To unsubscribe from this group, send email to raphaeljs+unsubscribe@googlegroups.com.
    For more options, visit this group at http://groups.google.com/group/raphaeljs?hl=en-GB.
  • Olivier Forget at May 1, 2012 at 12:58 am
    I am playing with a zoomable scrollable chart (timeline in my case) right
    now.

    I have found that calls to attr() are slower than calls to transform() on
    older browsers. Therefore I draw all my elements at 0,0, then
    elem.transform( 'T'+x+','+y) as necessary.

    How many elements are you talking about? And are you trying to support
    IE7/IE8? I have found modern browsers (including IE9!) to handle this very
    well. While the VML based browsers are pretty much hopeless.

    In my case I have found it very helpful to stop moving elements around once
    they are outside the "viewport" of the chart. The fewer things you have to
    update the better.
    On Tuesday, April 24, 2012 11:57:55 AM UTC-7, Lukasz wrote:

    Hi,

    I have a raphael based stock chart that I want to scroll.

    I paint a lot of "candles" on a chart that are created from rectangle
    and a short path.

    Now when I need to paint new candle I need to scroll all existing ones
    horizontally by fixed amount of pixels.

    In 1.2.3 I used translate to do the job, but it adds new translation for
    every shift.

    In 2.0 now I use transform("...t-32,0") - but I need to append
    translation every time too. Without appending my candles were moved only
    once.

    Is there a more efficient way to move path and rect element horizontally
    without attaching a new transformation each time?

    Many thanks for any ideas,
    Łukasz
    On Tuesday, April 24, 2012 11:57:55 AM UTC-7, Lukasz wrote:

    Hi,

    I have a raphael based stock chart that I want to scroll.

    I paint a lot of "candles" on a chart that are created from rectangle
    and a short path.

    Now when I need to paint new candle I need to scroll all existing ones
    horizontally by fixed amount of pixels.

    In 1.2.3 I used translate to do the job, but it adds new translation for
    every shift.

    In 2.0 now I use transform("...t-32,0") - but I need to append
    translation every time too. Without appending my candles were moved only
    once.

    Is there a more efficient way to move path and rect element horizontally
    without attaching a new transformation each time?

    Many thanks for any ideas,
    Łukasz
    On Tuesday, April 24, 2012 11:57:55 AM UTC-7, Lukasz wrote:

    Hi,

    I have a raphael based stock chart that I want to scroll.

    I paint a lot of "candles" on a chart that are created from rectangle
    and a short path.

    Now when I need to paint new candle I need to scroll all existing ones
    horizontally by fixed amount of pixels.

    In 1.2.3 I used translate to do the job, but it adds new translation for
    every shift.

    In 2.0 now I use transform("...t-32,0") - but I need to append
    translation every time too. Without appending my candles were moved only
    once.

    Is there a more efficient way to move path and rect element horizontally
    without attaching a new transformation each time?

    Many thanks for any ideas,
    Łukasz
    --
    You received this message because you are subscribed to the Google Groups "Raphaël" group.
    To view this discussion on the web, visit https://groups.google.com/d/msg/raphaeljs/-/WIoy3Plve6oJ.
    To post to this group, send an email to raphaeljs@googlegroups.com.
    To unsubscribe from this group, send email to raphaeljs+unsubscribe@googlegroups.com.
    For more options, visit this group at http://groups.google.com/group/raphaeljs?hl=en-GB.

Related Discussions

Discussion Navigation
viewthread | post