Loading ...
Sorry, an error occurred while loading the content.
 

Re: [svg-developers] Please can any one help me ,how to fill color at particular point on image using svg

Expand Messages
  • ddailey
    In looking at your code, two suggestions come to mind: 1. By doubly looping through up to a quarter of a million (512 x 512 ) array elements to see if they
    Message 1 of 4 , Dec 17, 2008
      In looking at your code, two suggestions come to mind:

      1. By doubly looping through up to a quarter of a million (512 x 512 ) array elements to see if they belong to bgarray or not, that could be time consuming, by itself. The 2^18 steps in JavaScript alone, could be where some of the problem lies, independent of any SVG considerations.

      Basically bgarray is a sparse matrix of some sort, I suppose. I would suggest running through that once, server-side to a new array
      which is simply a list of the integer values of bgvar for which bgarray[bgvar] = 1. The sparse matrix is then compacted to a smaller collection, that could then more adroitly be handled by your JavaScript.

      newArray=[]
      for (i in bgvar) if (bgvar[i]==1) newArray.push(i)

      Then when it is time to create the new nodes, you'll only have a fraction (hopefully small) of the original data (now stored in newArray) to loop through. This seems like a case where the advantage of a speedy language running server-side could really help, particularly if the matrix itself remains unchanged across multiple invocations of the web program.

      Also, rather than cloning all the new nodes (which involves both entering the DOM to get the node and its properties, but also re-entering the DOM to append the new node), I would imagine that

      var newnode=document.createElementNS(svgns, "rect")

      followed by all the setAttributes that you're already doing might be a bit faster, since it looks like the list of properties inherited from the pre-existing rect is probably no greater than the number of properties you're assigning dynamically.

      Hope this helps
      David


      ----- Original Message -----
      From: chandra reddy
      To: svg-developers@yahoogroups.com
      Sent: Wednesday, December 17, 2008 7:25 AM
      Subject: Re: [svg-developers] Please can any one help me ,how to fill color at particular point on image using svg


      thanks for reply.

      when i use following code
      for(i=0;i<512;i++)
      {
      var x =0;
      for(var l=0;l<512;l++)
      {
      if(bgarray[bgvar]==1)
      {
      var svgobj = svgDocument.getElementById("rect");
      var newnode = svgobj.cloneNode(false);
      svgstyle = newnode.getStyle();
      k++;
      //svgstyle.setProperty ('opacity', 0.3);
      svgstyle.setProperty ('fill', "red");
      newnode.setAttribute ('id','bg'+k);
      newnode.setAttribute ('x', x);
      newnode.setAttribute ('y', y);
      newnode.setAttribute ('width',0.78);
      newnode.setAttribute ('height',0.78);
      newnode.setAttribute ('visibility','visible');
      var contents = svgDocument.getElementById ('contents');
      newnode = contents.appendChild (newnode);
      }
      bgvar =bgvar+1;
      x = x+0.78;
      }
      y = y+0.78;
      it is working fine , but it is taking more time, can any one help how shoud i reduce time.


      thanks and regards
      P.Chandra Shaker Reddy

      ________________________________
      From: ddailey <ddailey@...>
      To: svg-developers@yahoogroups.com
      Sent: Wednesday, December 17, 2008 5:30:37 PM
      Subject: Re: [svg-developers] Please can any one help me ,how to fill color at particular point on image using svg

      Well, the filling of a region of contiguous pixels from one point, as with the paint bucket in MacPaint and its descendents (including Photoshop), is more of a bitmapped concept than a vector graphics concept. One does not really have access to pixels in SVG (though there are certainly times at which it would be nice if we did!).

      However, suppose we have a pre-existing vector map: a collection of basic elements like paths and rects and so forth. Then, using JavaScript, one can attach event handlers to all the elements of that vector map, let the cursor turn into a paint bucket shaped icon, and allow the click of the mouse on any particular element be translated into a command that colors that object with the actively chosen color, gradient or pattern.

      So if this is what you mean, then the answer would be with JavaScript as in:

      VM = [ list of basic elements ]
      for (var i in VM) VM.setAttributeNS( null, "onclick", "paintfill(evt) ")
      function paintfill(evt) {
      var O=evt.target
      O.setAttributeNS( null, "fill", activeColor)

      }

      This answer rather presupposes that you're building some kind of drawing app, of which several proofs of concept have already been demonstrated here and there.

      Hope this makes sense
      David Dailey

      ----- Original Message -----
      From: chandra reddy
      To: svg-developers@ yahoogroups. com
      Sent: Wednesday, December 17, 2008 3:47 AM
      Subject: [svg-developers] Please can any one help me ,how to fill color at particular point on image using svg

      Hi All

      Please can any one help me ,how to fill color at particular point on image using svg

      Advanced Thanks.

      Regards
      P.Chandra Shaker Reddy

      [Non-text portions of this message have been removed]

      [Non-text portions of this message have been removed]



      [Non-text portions of this message have been removed]





      [Non-text portions of this message have been removed]
    Your message has been successfully submitted and would be delivered to recipients shortly.