Forum > Pas2JS

[SOLVED] canvas

(1/2) > >>

krolikbest:
Hi,

 i try to build web app using WCL as well as a pure pas2js (if i can call it that). Basically the second way (without using WCL) gives me more flexibility in using graphic objects like rectangles, arc, circle and so on. But to build some usable gui for my users it takes more effort in comparision to WCL. So my question - how to paint some graphic on canvas of TWform? Lets say: an arc, in pas2js i paint it on canvas in that way:

--- Code: Pascal  [+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i < x.length; i++) { x[i].style.maxHeight='none'; x[i].style.height = Math.min(x[i].clientHeight+15,306)+'px'; x[i].style.resize = "vertical";}};} ---  c:=TJSHTMLCanvasElement(document.createElement('canvas'));  ctx:=c.getContextAs2DContext('2d');  with ctx do  begin   beginPath;   linewidth:=7;   arc(50,90,40,pi,1.5*pi,false);   strokeStyle:='#FF0000';   stroke;  end;  with document.body do   appendChild(c); 
but have no idea how to do it using WCL. Even if I add this code snippet in WButton OnClick procedure this won't show me graphic. I see created canvas in Chrome's console , but probably using

--- Code: Pascal  [+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i < x.length; i++) { x[i].style.maxHeight='none'; x[i].style.height = Math.min(x[i].clientHeight+15,306)+'px'; x[i].style.resize = "vertical";}};} ---with document.body do   appendChild(c); makes it in wrong place or is so anyway bad idea..
So hmm.. :-[

Regards,

krolikbest:
So far I do

--- Code: Pascal  [+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i < x.length; i++) { x[i].style.maxHeight='none'; x[i].style.height = Math.min(x[i].clientHeight+15,306)+'px'; x[i].style.resize = "vertical";}};} ---    c1:=TJSHTMLCanvasElement(document.createElement('canvas'));    c1.width:=WPanel1.Width;    c1.height:=WPanel1.Height;    ctx:=TJSHTMLCanvasElement(c1).getContextAs2DContext('2d');    with ctx do    begin      beginPath;      linewidth:=7;      arc(50,90,40,pi,1.5*pi,false);      strokeStyle:='#FF0000';      stroke;    end;    TJSHTMLElement(document.getElementById('WPanel1')).appendChild(c1);      and that works, but this code above creates a tag <canvas> in e.g. WPanel1 (a tag <div id="WPanel1">), so in fact I paint on new tag called <canvas> instead of WPanel's canvas.
But if I run (under button.click) this code:

--- Code: Pascal  [+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i < x.length; i++) { x[i].style.maxHeight='none'; x[i].style.height = Math.min(x[i].clientHeight+15,306)+'px'; x[i].style.resize = "vertical";}};} ---  wpanel1.Canvas.MoveTo(10,10);  wpanel1.Canvas.LineTo(20,20);then I see next new tag <canvas> within the tag <div id="WPanel1">. It would be good to know how set ID for this tag since then I could do something like

--- Code: Pascal  [+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i < x.length; i++) { x[i].style.maxHeight='none'; x[i].style.height = Math.min(x[i].clientHeight+15,306)+'px'; x[i].style.resize = "vertical";}};} ---    c1:=TJSHTMLCanvasElement(document.getElementById("id of WPanel1.Canvas"));instead of

--- Code: Pascal  [+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i < x.length; i++) { x[i].style.maxHeight='none'; x[i].style.height = Math.min(x[i].clientHeight+15,306)+'px'; x[i].style.resize = "vertical";}};} ---    c1:=TJSHTMLCanvasElement(document.createElement('canvas'));

Regards,

krolikbest:
Ok, that was simply:

--- Code: Pascal  [+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i < x.length; i++) { x[i].style.maxHeight='none'; x[i].style.height = Math.min(x[i].clientHeight+15,306)+'px'; x[i].style.resize = "vertical";}};} ---    c1:=TJSHTMLCanvasElement(document.getElementsByTagName('canvas')[x]); 
where x is just number of (in my example) wpanel. Solved. Tea time...

PascalDragon:
I've now added CanvasElement and ContextElement to TCanvas (the fields did already exist, but you couldn't trivially access them). Thus you can now simply do WPanel1.Canvas.ContextElement to access the HTML canvas.

krolikbest:
Nice. Actually I'm more and more convinced that user interface will be based on web browsers in near future and internet technology in general.

Navigation

[0] Message Index

[#] Next page

Go to full version