/
Full_Custom_Stage.html
80 lines (68 loc) · 3.26 KB
/
Full_Custom_Stage.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html lang="en" ng-app="MyApp">
<head>
<meta charset="UTF-8">
<title>Anychart AngularJS plugin demo.</title>
<script src="../node_modules/angular/angular.min.js"></script>
<script src="../node_modules/anychart/dist/js/anychart-base.min.js"></script>
<script src="../node_modules/anychart/dist/js/anychart-ui.min.js"></script>
<script src="../node_modules/anychart/dist/js/anychart-exports.min.js"></script>
<script src="../dist/anychart-angularjs.min.js"></script>
<link rel="stylesheet" href="../node_modules/anychart/dist/css/anychart-ui.min.css">
<link rel="stylesheet" href="../node_modules/anychart/dist/fonts/css/anychart-font.min.css">
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script>
(function() {
'use strict';
window.requestAnimationFrame = window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
setTimeout(callback, 1000 / 60);
};
angular
.module('MyApp', ['anychart-angularjs'])
.controller('MyCtrl', ['$scope', 'AnychartService', function($scope, AnychartService) {
var stage = anychart.graphics.create('custom_stage_container');
var bounds = stage.getBounds();
var radius = 20;
stage.rect(bounds.left, bounds.top, bounds.width, bounds.height);
var circle = stage.circle(radius + 1, radius + 1, radius);
circle.fill(['#fff', '#333'], 0.5, 0.5, null, 1, 0.3, 0.3).stroke('#222');
var stepX = 7 - 5 * Math.random();
var stepY = 7 - 5 * Math.random();
draw();
function draw() {
window.requestAnimationFrame(draw);
repaint();
}
function repaint() {
if (circle.centerX() + radius >= bounds.left + bounds.width || circle.centerX() - radius <= bounds.left)
stepX = -stepX;
if (circle.centerY() + radius >= bounds.top + bounds.height || circle.centerY() - radius <= bounds.top)
stepY = -stepY;
stage.suspend();
circle
.centerX(circle.centerX() + stepX)
.centerY(circle.centerY() + stepY);
stage.resume();
}
//Notify plugin about the custom stage is in use.
$scope.stg = stage;
}]);
})();
</script>
</head>
<body ng-controller="MyCtrl">
<div anychart-stage style="width: 600px; height: 400px" ac-instance="stg" id="custom_stage_container"></div>
</body>
</html>