SVG drawing shows up outside the layout

Hi,

I am trying to add the snap framework (http://snapsvg.io/docs/) in a plugin (like the canvas plugin, but with more options). I tried creating two circles in the onCreate function like so.

instanceProto.onCreate = function()

{

this.svg = document.createElement('svg');

this.svg.width=this.width;

this.svg.height=this.height;

var viewBox = "0 0 "+ this.width+ " " + this.height;

this.svg.setAttribute("viewBox",viewBox);

this.SNAP = Snap(this.svg);

// Create big blue circle in the middle:

var bigCircle = this.SNAP.circle(40, 40, 80);

bigCircle.attr({

fill: "#0000FF",

stroke: "#000",

strokeWidth: 5

});

// Create another small black circle:

var smallCircle = this.SNAP.circle(40, 40, 35);

};

I just added the dependancy and set it as a 'world' plugin. Then I added it on the top portion of the layout and tested the layout. The circles were not seen on the screen at all. When I tried to see the console (Chrome dev tools), I noticed that the circles are actually drawn below the layout (seen only when the layout is shrunk). Can anyone tell me how to get this to dray on the actual plugin area?

Thats because the c2canvas (Construct 2 canvas ) overlays yours.

Try this :

		
instanceProto.onCreate = function()
{
var svgcanvas = document.createElement('svgcanvas');
var c2canvas = document.getElementById('c2canvas');
var maindiv = this.runtime.canvas.parentNode;
svgcanvas.id = "svgCanvas";
svgcanvas.style.position = "absolute";
c2canvas.style.position = "absolute";
maindiv.style.position = "relative";
svgcanvas.style.width = 100 + "%";
svgcanvas.style.height = 100 + "%";
svgcanvas.style.left = 0 + "px";
svgcanvas.style.top = 0 + "px";
svgcanvas.style.zIndex = 1;
c2canvas.style.zIndex = 0;

this.svg = document.createElement('svg');
svgcanvas.appendChild(this.svg);
this.svg.width=this.width;
this.svg.height=this.height;
var viewBox = "0 0 "+ this.width+ " " + this.height;
this.svg.setAttribute("viewBox",viewBox);
this.SNAP = Snap(this.svg);

// Create big blue circle in the middle:
var bigCircle = this.SNAP.circle(40, 40, 80);
bigCircle.attr({
fill: "#0000FF",
stroke: "#000",
strokeWidth: 5
});
// Create another small black circle:
var smallCircle = this.SNAP.circle(40, 40, 35);	
};
[/code:2f6lmmgk]

It should work, i made it for my upcoming babylonJS plugin.

Thanks you very much X3M, that was superfast!!. Let me try this out.

By the way, I checked our the BabylonJS. Pretty cool! Will you be publishing it in the store? When?

Thanks you very much X3M, that was superfast!!. Let me try this out.

By the way, I checked our the BabylonJS. Pretty cool! Will you be publishing it in the store? When?

Yep , At the end of November, by the time I've verified each function.

X3M, I will be waiting. BabylonJS looks pretty amazing.

The fix did not work out of the box, but was promising. Before I could tweak around and make it work, I ended up changing the library to Raphael, as it has path binary operations and I needed those.

But the issue is still there.

I am using the code, in instanceProto.onCreate = function()

this.divSVG = document.createElement('svg');

this.divSVG.setAttribute("id","divSVG");

this.divSVG.style.width = 100 + "%";

this.divSVG.style.height = 100 + "%";

this.divSVG.style.left = 0 + "px";

this.divSVG.style.top = 0 + "px";

this.divSVG.background = "red";

this.divSVG.setAttribute("position","relative");

var viewBox = "0 0 "+ this.width+ " " + this.height;

this.divSVG.setAttribute("viewBox",viewBox);

var maindiv = this.runtime.canvas.parentNode;

jQuery("body").append(this.divSVG);

..

The plugin is a 'world' plugin.

It starts at 10,10 and is 100, 120 in size.

But when I look at the created element in chrome debugger, it is not created ON the plugin object. It is at the bottom of the layout again. If I play with the coordinates the drawing are coming on top of the layout, so this is not because C2 canvas overdrawing the new one. So, few questions here, someone kindly help.

1) Can I add svg element (new one I am creating) on top of canvas (c2Canvas) element? I looked around in net and cold not see if this is ok. I checked other svg plugins (By pode) and it's adding a new element similar to c2Canvas, outside it. Any reason?

2) How do I create a div and fill colour exactly on top of the physical bounds of a plugin? I tried using the bbox and the quad properties and it seems that they all gives 0s for all the values in onCreate. When I console.log(this) for the plugin, I see bbox has left, top etc. values, but when I try to log (this.bbox) it gives all zeros. Also, when I use these values to set the values for the new div, it is setting all zeroes.

Pode created a DIV outside the DIV that contains the c2canvas, He called it "divSVG" , check his demo : https://dl.dropboxusercontent.com/u/141 ... index.html

In my opinion, I don't think it should be like that, He made a looping JQuery function that adjusts the size and position of the div at each tick. I believe this can be done in a better way if you simply put your canvas on top of the c2canvas.

This is what I mean:

If you can, send me your code by PM and I'll try to set it up for you

2) How do I create a div and fill colour exactly on top of the physical bounds of a plugin? I tried using the bbox and the quad properties and it seems that they all gives 0s for all the values in onCreate. When I console.log(this) for the plugin, I see bbox has left, top etc. values, but when I try to log (this.bbox) it gives all zeros. Also, when I use these values to set the values for the new div, it is setting all zeroes.

Those are Edittime functions, they do not work at Runtime. Are you talking about drawing on the Construct 2 Editor layout or the Browser canvas ?

X3M

If you think it's a big improvement, you should consider creating your own separate div plug.

X3M

If you think it's a big improvement, you should consider creating your own separate div plug.

No it doesn't affect the performance, the plugin is great, I just criticized the method used to include the canvas .

OK, good to know.

The plug is somewhat old, and the creator has moved on.