| OLD | NEW |
| 1 // Copyright (c) 2012, the Dart project authors. Please see the AUTHORS file | 1 // Copyright (c) 2012, the Dart project authors. Please see the AUTHORS file |
| 2 // for details. All rights reserved. Use of this source code is governed by a | 2 // for details. All rights reserved. Use of this source code is governed by a |
| 3 // BSD-style license that can be found in the LICENSE file. | 3 // BSD-style license that can be found in the LICENSE file. |
| 4 // | 4 // |
| 5 // Canvas API tests. Some of these are adapted from: | 5 // Canvas API tests. Some of these are adapted from: |
| 6 // | 6 // |
| 7 // http://www.html5canvastutorials.com/ | 7 // http://www.html5canvastutorials.com/ |
| 8 | 8 |
| 9 library openglui_canvas_tests; | 9 library openglui_canvas_tests; |
| 10 | 10 |
| 11 import 'gl.dart'; | 11 import 'gl.dart'; |
| 12 import 'dart:math' as Math; | 12 import 'dart:math' as Math; |
| 13 | 13 |
| 14 var ctx; | 14 var ctx; |
| 15 var width, height; | 15 var width, height; |
| 16 bool isDirty = true; | 16 bool isDirty = true; |
| 17 var canvas; | 17 var canvas; |
| 18 | 18 |
| 19 void resize(int w, int h) { | 19 void resize(int w, int h) { |
| 20 width = w; | 20 width = w; |
| 21 height = h; | 21 height = h; |
| 22 } | 22 } |
| 23 | 23 |
| 24 void setup(canvasp, int w, int h) { | 24 void setup(canvasp, int w, int h) { |
| 25 if (canvasp == null) { | 25 if (canvasp == null) { |
| 26 log("Allocating canvas"); |
| 26 canvas = new CanvasElement(width: w, height: h); | 27 canvas = new CanvasElement(width: w, height: h); |
| 27 } else { | 28 } else { |
| 29 log("Using parent canvas"); |
| 28 canvas = canvasp; | 30 canvas = canvasp; |
| 29 // called from gl_driver.dart. | 31 // called from gl_driver.dart. |
| 30 // This is a kludge; we need a clean way of handling events. | 32 // This is a kludge; we need a clean way of handling events. |
| 31 canvas.on.mouseDown.add((e) { | 33 canvas.on.mouseDown.add((e) { |
| 32 ++testnum; | 34 ++testnum; |
| 33 }); | 35 }); |
| 34 } | 36 } |
| 35 ctx = canvas.getContext("2d"); | 37 ctx = canvas.getContext("2d"); |
| 36 if (ctx == null) { | 38 if (ctx == null) { |
| 37 throw "Failed to get 2D context"; | 39 throw "Failed to get 2D context"; |
| (...skipping 449 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 487 ctx.strokeStyle = "#0000FF"; | 489 ctx.strokeStyle = "#0000FF"; |
| 488 ctx.strokeStyle = "rgba(128,128,128, 0.5)"; | 490 ctx.strokeStyle = "rgba(128,128,128, 0.5)"; |
| 489 ctx.strokeRect(width / 5, height / 10, width / 2, height / 8); | 491 ctx.strokeRect(width / 5, height / 10, width / 2, height / 8); |
| 490 log("Width = $width"); | 492 log("Width = $width"); |
| 491 } | 493 } |
| 492 | 494 |
| 493 void loadImage() { | 495 void loadImage() { |
| 494 initTest("Image loading"); | 496 initTest("Image loading"); |
| 495 var imageObj = new ImageElement(); | 497 var imageObj = new ImageElement(); |
| 496 imageObj.on.load.add((e) { | 498 imageObj.on.load.add((e) { |
| 497 ctx.drawImage(imageObj, 69, 50); | 499 ctx.drawImage(e, 69, 50); |
| 498 }); | 500 }); |
| 499 imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.b
mp'; | 501 imageObj.src = 'chrome.png'; |
| 500 } | 502 } |
| 501 | 503 |
| 502 void clip() { | 504 void clip() { |
| 503 initTest("Clipping"); | 505 initTest("Clipping"); |
| 504 var x = width / 2; | 506 var x = width / 2; |
| 505 var y = height / 2; | 507 var y = height / 2; |
| 506 var radius = height / 4; | 508 var radius = height / 4; |
| 507 var offset = 2 * radius / 3; | 509 var offset = 2 * radius / 3; |
| 508 | 510 |
| 509 ctx.save(); | 511 ctx.save(); |
| (...skipping 88 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 598 ctx.translate(-150 * (numPerRow-1), 150); | 600 ctx.translate(-150 * (numPerRow-1), 150); |
| 599 } else { | 601 } else { |
| 600 ctx.translate(150, 0); | 602 ctx.translate(150, 0); |
| 601 } | 603 } |
| 602 } | 604 } |
| 603 ctx.drawImage(tempCanvas, 0, 0); | 605 ctx.drawImage(tempCanvas, 0, 0); |
| 604 ++num; | 606 ++num; |
| 605 } | 607 } |
| 606 } | 608 } |
| 607 | 609 |
| 610 class Rectangle { |
| 611 num x, y, width, height, borderWidth; |
| 612 } |
| 613 |
| 614 var startTime = 0; |
| 615 var myRectangle = null; |
| 616 |
| 617 void anim() { |
| 618 if (myRectangle == null) { |
| 619 myRectangle = new Rectangle(); |
| 620 myRectangle.x = 250; |
| 621 myRectangle.y = 70; |
| 622 myRectangle.width = 100; |
| 623 myRectangle.height = 50; |
| 624 myRectangle.borderWidth = 5; |
| 625 startTime = (new DateTime.now()).millisecondsSinceEpoch; |
| 626 } |
| 627 |
| 628 var now = (new DateTime.now()).millisecondsSinceEpoch; |
| 629 var time = now - startTime; |
| 630 var amplitude = 150; |
| 631 |
| 632 // in ms |
| 633 var period = 2000; |
| 634 var centerX = width / 2 - myRectangle.width / 2; |
| 635 var nextX = amplitude * Math.sin(time * 2 * Math.PI / period) + centerX; |
| 636 myRectangle.x = nextX; |
| 637 |
| 638 // clear |
| 639 ctx.clearRect(0, 0, width, height); |
| 640 |
| 641 // draw |
| 642 |
| 643 ctx.beginPath(); |
| 644 ctx.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height); |
| 645 ctx.fillStyle = '#8ED6FF'; |
| 646 ctx.fill(); |
| 647 ctx.lineWidth = myRectangle.borderWidth; |
| 648 ctx.strokeStyle = 'black'; |
| 649 ctx.stroke(); |
| 650 } |
| 651 |
| 608 int testnum = -1; // Start with latest. | 652 int testnum = -1; // Start with latest. |
| 609 | 653 |
| 610 void update() { | 654 void update() { |
| 655 if (testnum == 0) { |
| 656 anim(); |
| 657 return; |
| 658 } |
| 611 if (!isDirty) return; | 659 if (!isDirty) return; |
| 612 switch(testnum) { | 660 switch(testnum) { |
| 613 case 0: | 661 case 1: |
| 614 helloWorld(); | 662 helloWorld(); |
| 615 break; | 663 break; |
| 616 case 1: | |
| 617 smiley(); | |
| 618 break; | |
| 619 case 2: | 664 case 2: |
| 620 blocks(); | 665 blocks(); |
| 621 break; | 666 break; |
| 622 case 3: | 667 case 3: |
| 623 squares(); | 668 squares(); |
| 624 break; | 669 break; |
| 625 case 4: | 670 case 4: |
| 626 grid(); | 671 grid(); |
| 627 break; | 672 break; |
| 628 case 5: | 673 case 5: |
| (...skipping 40 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 669 break; | 714 break; |
| 670 case 19: | 715 case 19: |
| 671 clip(); | 716 clip(); |
| 672 break; | 717 break; |
| 673 case 20: | 718 case 20: |
| 674 shear(); | 719 shear(); |
| 675 break; | 720 break; |
| 676 case 21: | 721 case 21: |
| 677 composite(); | 722 composite(); |
| 678 break; | 723 break; |
| 724 case 22: |
| 725 smiley(); |
| 726 break; |
| 679 default: | 727 default: |
| 680 if (testnum < 0) { | 728 if (testnum < 0) { |
| 681 testnum = 21; | 729 testnum = 22; |
| 682 } else { | 730 } else { |
| 683 testnum = 0; | 731 testnum = 0; |
| 684 } | 732 } |
| 685 update(); | 733 update(); |
| 686 break; | 734 break; |
| 687 } | 735 } |
| 688 isDirty = false; | 736 isDirty = false; |
| 689 } | 737 } |
| 690 | 738 |
| 691 /* | 739 /* |
| (...skipping 12 matching lines...) Expand all Loading... |
| 704 onMotionOutside(num when, num x, num y) {} | 752 onMotionOutside(num when, num x, num y) {} |
| 705 onMotionPointerDown(num when, num x, num y) { | 753 onMotionPointerDown(num when, num x, num y) { |
| 706 ++testnum; | 754 ++testnum; |
| 707 isDirty = true; | 755 isDirty = true; |
| 708 log("Marking dirty"); | 756 log("Marking dirty"); |
| 709 } | 757 } |
| 710 | 758 |
| 711 onMotionPointerUp(num when, num x, num y) {} | 759 onMotionPointerUp(num when, num x, num y) {} |
| 712 | 760 |
| 713 onKeyDown(num when, int flags, int keycode, int metastate, int repeat) { | 761 onKeyDown(num when, int flags, int keycode, int metastate, int repeat) { |
| 714 ++testnum; | 762 if (keycode == 32) { |
| 715 isDirty = true; | 763 ++testnum; |
| 716 log("Marking dirty"); | 764 isDirty = true; |
| 765 log("Marking dirty"); |
| 766 } |
| 717 } | 767 } |
| 718 | 768 |
| 719 onKeyUp(num when, int flags, int keycode, int metastate, int repeat) {} | 769 onKeyUp(num when, int flags, int keycode, int metastate, int repeat) {} |
| 720 | 770 |
| 721 onKeyMultiple(num when, int flags, int keycode, int metastate, int repeat) { | 771 onKeyMultiple(num when, int flags, int keycode, int metastate, int repeat) { |
| 722 } | 772 } |
| 723 | 773 |
| 724 | 774 |
| OLD | NEW |