Google Groups

Re: RGraph gradient applied to the single circle


Ivan Gasparetto May 7, 2012 2:14 AM
Posted in group: JavaScript InfoVis Toolkit
OK,

Please see this image:
http://ivangasparetto.com/jit-test/image.png

Please notice, at the right, that we have a 3D effect on a 2D graph.
On the left you can see that the gradient is not contained within the
single blob, but it starts at the center of the canvas, going out to
where the blobs are. The blobs are painted with the end of the
gradient.

Thanks

Ivan

On May 6, 9:53 am, Hamann <stev...@gmail.com> wrote:
> no because I do not really understand the problem.
> maybe you could give the correct result through an example like JPG (via
> Fotoshop ) to show for Us.
> perhaps this also benefits to the others users
>
> Op zaterdag 5 mei 2012 23:27:27 UTC+2 schreef Ivan Gasparetto het volgende:
>
>
>
>
>
>
>
>
>
> > Anyone with any good ideas guys?
>
> > On May 4, 9:31 am, Ivan Gasparetto <i.gaspare...@valuesoft.com.br>
> > wrote:
> > > Hi Hamann,
>
> > > Did you have a chance to check it?
> > > Any ideas?
>
> > > Thanks,
>
> > > Ivan
>
> > > On May 3, 1:22 pm, Ivan Gasparetto <i.gaspare...@valuesoft.com.br>
> > > wrote:
>
> > > > Hi Hamann,
>
> > > > Thanks for the reply.
>
> > > > It doesn't work but you can notice only if you have many blobs. For
> > > > example:http://ivangasparetto.com/jit-test/
>
> > > > As you can see, the blobs are a sort of window where you can see
> > > > through the gradient that is printed in the canvas underneath.
>
> > > > Ivan
>
> > > > On May 3, 12:55 pm, Hamann <stev...@gmail.com> wrote:
>
> > > > > Just test your BLOB and it works fine on my RGRAPH
> > > > > Also thanks for the BLOB node
>
> > > > > Op dinsdag 1 mei 2012 15:59:12 UTC+2 schreef Ivan Gasparetto het
> > volgende:
>
> > > > > > Hello,
>
> > > > > > I am using the RGraph and I need to create circles with a
> > gradients,
> > > > > > so they look to be 3D spheres.
> > > > > > I have created a new node type called blob and I have implemented
> > the
> > > > > > code as follows. However, the gradient is applied to the entire
> > > > > > canvas.
> > > > > > Not sure I could explain it, but is there anyone that can help?
>
> > > > > > $jit.RGraph.Plot.NodeTypes.implement({
> > > > > >         'blob': {
> > > > > >                 render: function (node, canvas) {
> > > > > >                         var pos = node.pos.getc(true),
> > > > > >                                 dim = node.getData("dim");
>
> > > > > >                         var ctx = canvas.getCtx();
> > > > > >                         var radgrad = ctx.createRadialGradient(0,
> > 0, dim,
> > > > > > 0, 0,
> > > > > > node.getPos().rho);
> > > > > >                         radgrad.addColorStop(0, '#A7D30C');
> > > > > >                         radgrad.addColorStop(0.9, '#019F62');
> > > > > >                         radgrad.addColorStop(1,
> > 'rgba(1,159,98,0)');
> > > > > >                         ctx.fillStyle = radgrad;
>
> > > > > >                         this.nodeHelper.circle.render("fill", pos,
> > dim,
> > > > > > canvas)
> > > > > >                 },
> > > > > >                 contains: function (node, canvas) {
> > > > > >                         var pos = node.pos.getc(true),
> > > > > >                                 dim = node.getData("dim");
> > > > > >                         return
> > this.nodeHelper.circle.contains(pos,
> > > > > > canvas, dim)
> > > > > >                 }
> > > > > >         }
> > > > > > });
>
> > > > > > Many thanks
>
> > > > > > Ivan
>
> > > > >  circle with a gradient.png
> > > > > 2KViewDownload