Created
May 28, 2019 07:38
-
-
Save mzsima/d655e43219666dafe31859db938ea37d to your computer and use it in GitHub Desktop.
Blazor Random Rect
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width" /> | |
| <title>web3</title> | |
| <base href="/" /> | |
| <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" /> | |
| <link href="css/site.css" rel="stylesheet" /> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.5.1/pixi.min.js"></script> | |
| <script type="text/javascript"> | |
| const app = new PIXI.Application({width: 256, height: 256});; | |
| const graphics = new PIXI.Graphics(); | |
| window.CreatePIXI = (params) => { | |
| console.log("test app") | |
| document.getElementById('mypixi').appendChild(app.view); | |
| console.log(app) | |
| } | |
| window.DrawRect = (params) => { | |
| graphics.clear(); | |
| graphics.lineStyle(2, 0xFEEB77, 1); | |
| graphics.beginFill(0x650A5A); | |
| graphics.drawRect(params.x, params.y, 100, 100); | |
| graphics.endFill(); | |
| app.stage.addChild(graphics); | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <app>Loading...</app> | |
| <script src="_framework/blazor.webassembly.js"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @page "/" | |
| @inject IJSRuntime JsRuntime; | |
| <h1>Call JavaScript Function Example</h1> | |
| <button type="button" class="btn btn-primary" onclick="@DrawRect"> | |
| DrawRect | |
| </button> | |
| @functions { | |
| private async void DrawRect() | |
| { | |
| Random rnd = new Random(); | |
| int x = rnd.Next(10, 200); | |
| int y = rnd.Next(10, 200); | |
| await JsRuntime.InvokeAsync<object>("DrawRect", new {x = x, y = y}); | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @inherits LayoutComponentBase | |
| @inject IJSRuntime JsRuntime; | |
| <div class="sidebar"> | |
| <NavMenu /> | |
| </div> | |
| <div class="main"> | |
| <div class="top-row px-4"> | |
| <a href="http://blazor.net" target="_blank" class="ml-md-auto">About</a> | |
| </div> | |
| <div class="content px-4"> | |
| <div id="mypixi"></div> | |
| @Body | |
| </div> | |
| </div> | |
| @functions { | |
| protected override void OnAfterRender() | |
| { | |
| JsRuntime.InvokeAsync<object>("CreatePIXI",""); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment