SVG drawing shows up outside the layout

For developers using the Construct 2 Javascript SDK

Post » Wed Aug 31, 2016 5:09 pm

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?
B
10
S
2
Posts: 21
Reputation: 665

Post » Wed Aug 31, 2016 5:30 pm

Thats because the c2canvas (Construct 2 canvas ) overlays yours.
Try this :
Code: Select all
      
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);   
};


It should work, i made it for my upcoming babylonJS plugin.
Banned User
B
17
S
7
G
24
Posts: 388
Reputation: 14,494

Post » Thu Sep 01, 2016 5:54 pm

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?
B
10
S
2
Posts: 21
Reputation: 665

Post » Thu Sep 01, 2016 10:24 pm

praharsh wrote: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.
Banned User
B
17
S
7
G
24
Posts: 388
Reputation: 14,494

Post » Sat Sep 03, 2016 2:01 am

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.
B
10
S
2
Posts: 21
Reputation: 665

Post » Sat Sep 03, 2016 10:51 am

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
Image
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:
Image
If you can, send me your code by PM and I'll try to set it up for you
praharsh wrote: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 ?
Banned User
B
17
S
7
G
24
Posts: 388
Reputation: 14,494

Post » Sat Sep 03, 2016 1:33 pm

@X3M
If you think it's a big improvement, you should consider creating your own separate div plug.
Image ImageImage
B
169
S
50
G
174
Posts: 8,328
Reputation: 110,800

Post » Sat Sep 03, 2016 2:23 pm

newt wrote:@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 .
Banned User
B
17
S
7
G
24
Posts: 388
Reputation: 14,494

Post » Sat Sep 03, 2016 4:54 pm

OK, good to know.
The plug is somewhat old, and the creator has moved on.
Image ImageImage
B
169
S
50
G
174
Posts: 8,328
Reputation: 110,800


Return to Javascript SDK

Who is online

Users browsing this forum: No registered users and 1 guest