UpDating SVG

I have a page that uses an SVG graphic containing a line. I update the position of the line via JavaScript, but I would like to suspend SVG from redrawing until I have updating all the coordinates.

Thanks
sidwelleAsked:
Who is Participating?
 
Pravin AsarPrincipal Systems EngineerCommented:
As I said, implementing this is easy.


In my code, since I am rubberbanding, I create an element and with mousemove the the elements attributes are upated.


Look the Draw() function

// Code Snippet for Line
if (get_entity() == 1) {
                     if (bothPoints == 0) {
                           x1 = getClientX(evt);
                           y1 = getClientY(evt);
                           bothPoints =1;
                           drawLine (doc, x1, y1, x1, y1);
                     }
                     else {
                           x2 = getClientX(evt);
                           y2 = getClientY(evt);
                           newElem.setAttribute('x2', getClientX(evt));
                           newElem.setAttribute('y2', getClientY(evt));
                           bothPoints =0;
                     }
            }

Here is use flag named "bothPoints" to decide if all required attributes are entered.
When bothPoints == 0, first point is recorded and line with zero length is created and flag is toggled to bothPoints = 1
So next mouse down/click event
Once both captured (desired x2, y2) and the element is finalized.

IF you do not want the rubberbanding,
With first mouse click/down event, you  save x1, y1 and set the bothPoints = 1
So now when next mouse down/click event happens, you will save x2, y2 and create an element. and set the bothPoints=0.
By this way you are making sure you have required attributes to create geometry element.

If I were you, I will keep the rubberbanding effect, as this provides constant feedback to user, where is First Point, and where is current position of the mouse.


0
 
Pravin AsarPrincipal Systems EngineerCommented:
You can get the SVG object via document.getElementById() call and update the attributes of the elements

e.g. For line it is x1, y1, x2, y2

For Simple example see,

http://www.javascriptjournal.com/svg/useRect.svg

See the RubberBanding function implementation while drawing
0
 
sidwelleAuthor Commented:
yeah, that changes the properties, but it does not suspend drawing before the other props are updated.

'In VB you could:
LockWindowUpdate(MyControl.Handle)
Elem.setAttribute('x') = myX
Elem.setAttribute('y') = myY
LockWindowUpdate(0)
'Now it paints ...
0
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

 
Pravin AsarPrincipal Systems EngineerCommented:
To Suspend Drawing while properties are getting updated....Not a big deal.



It is a matter a ignoring the user inputs.

Can be done simply by managing a flag (such as drawFlag true/false). and plugging at the  appropriate place within your code.

if (drawFlag == false) { return; }

0
 
sidwelleAuthor Commented:
I am not very clear on the "drawFlag"  Is this a property that SVG exposes that you can set ?
or just a var to set so that user input is not accepted while drawing ?

//when I execute the following:
Elem.setAttribute('x') = myX      //The X coordinate of the object immediately moves to position myX
Elem.setAttribute('y') = myY     //The Y coordinate moves to position myY

/* The element moved to two different positions:
original location:  oldX, oldY
1st position:           myX, oldY
2nd position:          myX, myY
0
 
Pravin AsarPrincipal Systems EngineerCommented:
drawFlag is variable you will have your code.

for line element the atrributes are x1, y1, x2, y2

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<line x1="0" y1="0" x2="300" y2="300"
style="stroke:rgb(99,99,99);stroke-width:2"/>

</svg>
0
 
sidwelleAuthor Commented:
I don't see where you have shown how to suspend drawing until all the attributes are entered ?

0
 
sidwelleAuthor Commented:
thanks for the help.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.