mirror of
https://gitlab.com/freepascal.org/fpc/pas2js.git
synced 2025-04-13 17:59:21 +02:00
94 lines
2.6 KiB
ObjectPascal
94 lines
2.6 KiB
ObjectPascal
program democanvas2d;
|
|
|
|
uses BrowserApi.Web, System.Classes, JSApi.JS, System.SysUtils;
|
|
|
|
Type
|
|
TForm = Class
|
|
Canvas2D : TJSCanvasRenderingContext2D;
|
|
Ex : TJSHTMLInputElement;
|
|
Ey : TJSHTMLInputElement;
|
|
EHeight : TJSHTMLInputElement;
|
|
EWidth : TJSHTMLInputElement;
|
|
ELineWidth : TJSHTMLInputElement;
|
|
function ButtonClick(Event{%H-}: TJSMouseEvent): boolean;
|
|
Constructor Create; reintroduce;
|
|
end;
|
|
|
|
function TForm.ButtonClick(Event: TJSMouseEvent): boolean;
|
|
|
|
Var
|
|
X,Y,W,H : Double;
|
|
|
|
begin
|
|
writeln('Drawing rectangle');
|
|
X:=StrToFloat(EX.value);
|
|
Y:=StrToFloat(Ey.value);
|
|
W:=StrToFloat(EWidth.value);
|
|
H:=StrToFloat(EHeight.value);
|
|
Canvas2D.lineWidth:=ParseFloat(ELineWidth.value);
|
|
Canvas2D.rect(X,Y, W,H);
|
|
Canvas2D.stroke;
|
|
Result:=true;
|
|
end;
|
|
|
|
constructor TForm.Create;
|
|
|
|
Function CreateNumberEdit (aName : String) : TJSHTMLInputElement;
|
|
|
|
begin
|
|
Result:=TJSHTMLInputElement(document.createElement('input'));
|
|
Result['type']:='text';
|
|
Result.value:='100';
|
|
Result.name:=aName;
|
|
Result['style']:='width: 80px;';
|
|
end;
|
|
Var
|
|
Panel,PanelContent : TJSElement;
|
|
Button1:TJSElement;
|
|
Canvas : TJSHTMLCanvasElement;
|
|
|
|
begin
|
|
Panel:=document.createElement('div');
|
|
// attrs are default array property...
|
|
Panel['class']:='panel panel-default';
|
|
PanelContent:=document.createElement('div');
|
|
PanelContent['class']:='panel-body';
|
|
Button1:=document.createElement('input');
|
|
Button1['id']:='Button1';
|
|
Button1['type']:='submit';
|
|
Button1['class']:='btn btn-default';
|
|
Button1['value']:='Draw rectangle';
|
|
TJSHTMLElement(Button1).onclick:=@ButtonClick;
|
|
EHeight:=CreateNumberEdit('Height');
|
|
EWidth:=CreateNumberEdit('Width');
|
|
ELineWidth:=CreateNumberEdit('LineWidth');
|
|
ELineWidth['type']:='text';
|
|
ELineWidth.Value:='0.5';
|
|
EX:=CreateNumberEdit('X');
|
|
EY:=CreateNumberEdit('Y');
|
|
document.body.appendChild(Panel);
|
|
Panel.appendChild(PanelContent);
|
|
PanelContent.appendChild(Button1);
|
|
PanelContent.appendChild(document.createTextNode('X'));
|
|
PanelContent.appendChild(EX);
|
|
PanelContent.appendChild(document.createTextNode('Y'));
|
|
PanelContent.appendChild(EY);
|
|
PanelContent.appendChild(document.createTextNode('Width'));
|
|
PanelContent.appendChild(EWidth);
|
|
PanelContent.appendChild(document.createTextNode('Height'));
|
|
PanelContent.appendChild(EHeight);
|
|
PanelContent.appendChild(document.createTextNode('LineWidth'));
|
|
PanelContent.appendChild(ELineWidth);
|
|
Panel.appendChild(PanelContent);
|
|
Canvas:=TJSHTMLCanvasElement(document.createElement('canvas'));
|
|
Canvas.width:=640;
|
|
Canvas.height:=480;
|
|
PanelContent.appendChild(canvas);
|
|
Canvas2D:=Canvas.getContextAs2DContext('2d');
|
|
end;
|
|
|
|
begin
|
|
TForm.Create;
|
|
end.
|
|
|