jmgraph 3.2.18 → 3.2.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +174 -2
- package/dist/jmgraph.core.min.js +1 -1
- package/dist/jmgraph.core.min.js.map +1 -1
- package/dist/jmgraph.js +1672 -147
- package/dist/jmgraph.min.js +1 -1
- package/index.js +13 -2
- package/package.json +1 -1
- package/src/core/jmGraph.js +460 -5
- package/src/core/jmLayer.js +142 -0
- package/src/core/jmPath.js +55 -0
- package/src/lib/webgl/base.js +6 -0
- package/src/lib/webgl/path.js +8 -11
- package/src/shapes/jmEllipse.js +91 -0
- package/src/shapes/jmLabel.js +127 -15
- package/src/shapes/jmPolygon.js +129 -0
- package/src/shapes/jmStar.js +160 -0
- package/example/ball.html +0 -217
- package/example/base.html +0 -112
- package/example/canvas.html +0 -54
- package/example/cell.html +0 -284
- package/example/controls/arc.html +0 -129
- package/example/controls/arrowline.html +0 -78
- package/example/controls/bezier.html +0 -299
- package/example/controls/img.html +0 -97
- package/example/controls/label.html +0 -87
- package/example/controls/line.html +0 -173
- package/example/controls/prismatic.html +0 -63
- package/example/controls/rect.html +0 -64
- package/example/controls/resize.html +0 -112
- package/example/controls/test.html +0 -360
- package/example/es.html +0 -70
- package/example/es5module.html +0 -63
- package/example/heartarc.html +0 -116
- package/example/index.html +0 -47
- package/example/js/require.js +0 -5
- package/example/love/img/bling/bling.tps +0 -265
- package/example/love/img/bling.json +0 -87
- package/example/love/img/bling.tps +0 -295
- package/example/love/img/doc/bling.gif +0 -0
- package/example/love/img/love.json +0 -95
- package/example/love/img/love.tps +0 -315
- package/example/love/img/qq/qq.tps +0 -399
- package/example/love/img/qq.json +0 -242
- package/example/love/index.html +0 -40
- package/example/love/js/game.js +0 -558
- package/example/music.html +0 -211
- package/example/node/test.js +0 -138
- package/example/pdf.html +0 -187
- package/example/progress.html +0 -173
- package/example/pso.html +0 -148
- package/example/sort.html +0 -805
- package/example/tweenjs.html +0 -84
- package/example/webgl.html +0 -278
- package/example/xfj/img/dr_die.gif +0 -0
- package/example/xfj/index.html +0 -332
- package/example/xfj/shake.js +0 -49
- package/example/xfj/testori.html +0 -76
|
@@ -0,0 +1,160 @@
|
|
|
1
|
+
import {jmPath} from "../core/jmPath.js";
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* 画星形
|
|
5
|
+
* 支持自定义顶点数和内外半径，创建各种星形图案
|
|
6
|
+
* 星形由交替的外半径和内半径顶点组成
|
|
7
|
+
*
|
|
8
|
+
* @class jmStar
|
|
9
|
+
* @extends jmPath
|
|
10
|
+
* @param {object} params 星形的参数
|
|
11
|
+
* @param {array} [params.points] 自定义顶点数组，如果提供则忽略其他参数
|
|
12
|
+
* @param {number} [params.points=5] 星形顶点数（角数，3-50）
|
|
13
|
+
* @param {number} [params.radius=50] 星形外半径（从中心到尖角的距离）
|
|
14
|
+
* @param {number} [params.innerRadius=25] 星形内半径（从中心到凹陷处的距离）
|
|
15
|
+
* @param {object} [params.center={x:0,y:0}] 星形中心点坐标
|
|
16
|
+
*/
|
|
17
|
+
export default class jmStar extends jmPath {
|
|
18
|
+
|
|
19
|
+
constructor(params, t='jmStar') {
|
|
20
|
+
params = params || {};
|
|
21
|
+
params.isRegular = true; // 标记为规则图形
|
|
22
|
+
super(params, t);
|
|
23
|
+
|
|
24
|
+
// 参数验证和初始化
|
|
25
|
+
this.pointsCount = params.points || 5;
|
|
26
|
+
this.radius = params.radius || 50;
|
|
27
|
+
this.innerRadius = params.innerRadius || 25;
|
|
28
|
+
this.center = params.center || {x: 0, y: 0};
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
/**
|
|
32
|
+
* 设定或获取星形顶点数（角数）
|
|
33
|
+
* 顶点数决定了星形的角数，例如5表示五角星
|
|
34
|
+
*
|
|
35
|
+
* @property pointsCount
|
|
36
|
+
* @for jmStar
|
|
37
|
+
* @type {number}
|
|
38
|
+
*/
|
|
39
|
+
get pointsCount() {
|
|
40
|
+
return this.property('pointsCount');
|
|
41
|
+
}
|
|
42
|
+
set pointsCount(v) {
|
|
43
|
+
// 参数验证：顶点数必须在3-50之间
|
|
44
|
+
if(typeof v !== 'number' || isNaN(v) || v < 3) {
|
|
45
|
+
console.warn('jmStar: pointsCount must be a number >= 3');
|
|
46
|
+
v = 3;
|
|
47
|
+
}
|
|
48
|
+
if(v > 50) {
|
|
49
|
+
console.warn('jmStar: pointsCount should not exceed 50 for performance reasons');
|
|
50
|
+
v = 50;
|
|
51
|
+
}
|
|
52
|
+
this.needUpdate = true;
|
|
53
|
+
return this.property('pointsCount', Math.floor(v)); // 确保是整数
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
/**
|
|
57
|
+
* 设定或获取星形外半径
|
|
58
|
+
* 外半径是从中心到尖角的距离
|
|
59
|
+
*
|
|
60
|
+
* @property radius
|
|
61
|
+
* @for jmStar
|
|
62
|
+
* @type {number}
|
|
63
|
+
*/
|
|
64
|
+
get radius() {
|
|
65
|
+
return this.property('radius');
|
|
66
|
+
}
|
|
67
|
+
set radius(v) {
|
|
68
|
+
// 参数验证：半径必须为正数
|
|
69
|
+
if(typeof v !== 'number' || isNaN(v) || v <= 0) {
|
|
70
|
+
console.warn('jmStar: radius must be a positive number');
|
|
71
|
+
v = 1;
|
|
72
|
+
}
|
|
73
|
+
this.needUpdate = true;
|
|
74
|
+
return this.property('radius', v);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
/**
|
|
78
|
+
* 设定或获取星形内半径
|
|
79
|
+
* 内半径是从中心到凹陷处的距离
|
|
80
|
+
* 内半径应该小于外半径，否则会产生奇怪的形状
|
|
81
|
+
*
|
|
82
|
+
* @property innerRadius
|
|
83
|
+
* @for jmStar
|
|
84
|
+
* @type {number}
|
|
85
|
+
*/
|
|
86
|
+
get innerRadius() {
|
|
87
|
+
return this.property('innerRadius');
|
|
88
|
+
}
|
|
89
|
+
set innerRadius(v) {
|
|
90
|
+
// 参数验证：内半径必须为正数
|
|
91
|
+
if(typeof v !== 'number' || isNaN(v) || v <= 0) {
|
|
92
|
+
console.warn('jmStar: innerRadius must be a positive number');
|
|
93
|
+
v = 1;
|
|
94
|
+
}
|
|
95
|
+
// 警告：内半径不应大于外半径
|
|
96
|
+
if(v >= this.radius) {
|
|
97
|
+
console.warn('jmStar: innerRadius should be less than radius for proper star shape');
|
|
98
|
+
}
|
|
99
|
+
this.needUpdate = true;
|
|
100
|
+
return this.property('innerRadius', v);
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
/**
|
|
104
|
+
* 设定或获取星形中心
|
|
105
|
+
* 中心点是星形的几何中心
|
|
106
|
+
*
|
|
107
|
+
* @property center
|
|
108
|
+
* @for jmStar
|
|
109
|
+
* @type {object}
|
|
110
|
+
*/
|
|
111
|
+
get center() {
|
|
112
|
+
return this.property('center');
|
|
113
|
+
}
|
|
114
|
+
set center(v) {
|
|
115
|
+
// 参数验证：中心点必须包含x和y属性
|
|
116
|
+
if(!v || typeof v.x !== 'number' || typeof v.y !== 'number') {
|
|
117
|
+
console.warn('jmStar: center must be an object with x and y properties');
|
|
118
|
+
v = {x: 0, y: 0};
|
|
119
|
+
}
|
|
120
|
+
this.needUpdate = true;
|
|
121
|
+
return this.property('center', v);
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
/**
|
|
125
|
+
* 初始化图形点
|
|
126
|
+
* 计算星形的顶点坐标，交替使用外半径和内半径
|
|
127
|
+
*
|
|
128
|
+
* @method initPoints
|
|
129
|
+
* @private
|
|
130
|
+
* @for jmStar
|
|
131
|
+
*/
|
|
132
|
+
initPoints() {
|
|
133
|
+
// 如果提供了自定义顶点，直接使用
|
|
134
|
+
if (this.points && this.points.length > 0) {
|
|
135
|
+
return;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
// 计算星形顶点
|
|
139
|
+
const points = [];
|
|
140
|
+
const pointsCount = this.pointsCount;
|
|
141
|
+
const radius = this.radius;
|
|
142
|
+
const innerRadius = this.innerRadius;
|
|
143
|
+
const center = this.center;
|
|
144
|
+
|
|
145
|
+
// 星形有2倍顶点数的点（外半径和内半径交替）
|
|
146
|
+
// 从顶部开始绘制（-90度），顺时针方向
|
|
147
|
+
for (let i = 0; i < pointsCount * 2; i++) {
|
|
148
|
+
const angle = (i / pointsCount) * Math.PI - Math.PI / 2;
|
|
149
|
+
// 偶数索引使用外半径，奇数索引使用内半径
|
|
150
|
+
const r = i % 2 === 0 ? radius : innerRadius;
|
|
151
|
+
const x = center.x + Math.cos(angle) * r;
|
|
152
|
+
const y = center.y + Math.sin(angle) * r;
|
|
153
|
+
points.push({x, y});
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
this.points = points;
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
export { jmStar };
|
package/example/ball.html
DELETED
|
@@ -1,217 +0,0 @@
|
|
|
1
|
-
<!doctype html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
|
|
5
|
-
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
6
|
-
<!--<script type="text/javascript" src="../index.js"></script>
|
|
7
|
-
<script type="text/javascript" src="../dist/jmGraph.min.js"></script> -->
|
|
8
|
-
<style>
|
|
9
|
-
html,body {
|
|
10
|
-
margin:0;
|
|
11
|
-
padding:0;
|
|
12
|
-
width:100%;
|
|
13
|
-
height:100%;
|
|
14
|
-
overflow: hidden;
|
|
15
|
-
}
|
|
16
|
-
#mycanvas {
|
|
17
|
-
background-color:#000;
|
|
18
|
-
position: absolute;
|
|
19
|
-
width:100%;
|
|
20
|
-
height:100%;
|
|
21
|
-
}
|
|
22
|
-
</style>
|
|
23
|
-
|
|
24
|
-
</head>
|
|
25
|
-
<body>
|
|
26
|
-
<div id="mycanvas">
|
|
27
|
-
</div>
|
|
28
|
-
|
|
29
|
-
</body>
|
|
30
|
-
</html>
|
|
31
|
-
|
|
32
|
-
<script type="module">
|
|
33
|
-
import jmGraph from "../index.js";
|
|
34
|
-
var graph = new jmGraph('mycanvas', {
|
|
35
|
-
mode: 'webgl',
|
|
36
|
-
autoRefresh: true
|
|
37
|
-
});
|
|
38
|
-
//初始化jmgraph
|
|
39
|
-
/*jmGraph('mycanvas').then((g)=>{
|
|
40
|
-
graph = g;
|
|
41
|
-
jmUtils.bindEvent(window,'resize',resize);
|
|
42
|
-
refreshBall(g);
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
}); */
|
|
46
|
-
|
|
47
|
-
refreshBall(graph);
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
function refreshBall(g) {
|
|
52
|
-
resize();
|
|
53
|
-
|
|
54
|
-
var style = {
|
|
55
|
-
lineWidth: 1.2,
|
|
56
|
-
close:true,
|
|
57
|
-
stroke:'#fff',
|
|
58
|
-
fill:'#05a2e2'
|
|
59
|
-
};
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
var balls = [];
|
|
63
|
-
function createPosition(radius,i) {
|
|
64
|
-
var x = Math.random() * graph.width + radius;
|
|
65
|
-
var y = Math.random() * graph.height + radius;
|
|
66
|
-
|
|
67
|
-
for(var j=i+1;j<balls.length;j++) {
|
|
68
|
-
var b2= balls[j];
|
|
69
|
-
var lx = Math.abs(x - b2.x());
|
|
70
|
-
var ly = Math.abs(y - b2.y());
|
|
71
|
-
var l = Math.sqrt(lx * lx + ly * ly);
|
|
72
|
-
//如果二个球重叠则放 弃当前球
|
|
73
|
-
if(l < radius + b2.radius) {
|
|
74
|
-
return createPosition(radius);
|
|
75
|
-
}
|
|
76
|
-
}
|
|
77
|
-
return {x:x,y:y};
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
for(var i=0;i<100;i++) {
|
|
81
|
-
var radius = Math.random() * 10 + 8;
|
|
82
|
-
var styletmp = graph.util.clone(style);
|
|
83
|
-
styletmp.fill = graph.createRadialGradient('50%','50%',0,'50%','50%',radius);
|
|
84
|
-
var rr1 = Math.floor(Math.random() * 255);
|
|
85
|
-
var gg1 = Math.floor(Math.random() * 255);
|
|
86
|
-
var bb1 = Math.floor(Math.random() * 255);
|
|
87
|
-
var rr2 = Math.floor(Math.random() * 255);
|
|
88
|
-
var gg2 = Math.floor(Math.random() * 255);
|
|
89
|
-
var bb2 = Math.floor(Math.random() * 255);
|
|
90
|
-
styletmp.fill.addStop(0,graph.util.toColor(rr1,gg1,bb1));
|
|
91
|
-
styletmp.fill.addStop(1,graph.util.toColor(rr2,gg2,bb2));
|
|
92
|
-
//styletmp.fill = 'r(0.5,0.1)#ccc-#ccc';
|
|
93
|
-
var p = createPosition(radius);
|
|
94
|
-
var b = new ball(graph,p.x,p.y,radius,styletmp);
|
|
95
|
-
b.vx = 0;//Math.random() * 20 - 10;
|
|
96
|
-
b.vy = 0;//Math.random() * 20 - 10;
|
|
97
|
-
//b.ax = 0;
|
|
98
|
-
//b.ay = 0.4;
|
|
99
|
-
balls.push(b);
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
var radius = Math.random() * 10 + 6;
|
|
103
|
-
var styletmp = graph.util.clone(style);
|
|
104
|
-
styletmp.fill = graph.createRadialGradient(radius,radius,0,radius,radius,radius);
|
|
105
|
-
styletmp.fill.addStop(0,'#fff');
|
|
106
|
-
styletmp.fill.addStop(1, graph.util.toColor(255,149,255));
|
|
107
|
-
var p = createPosition(radius,0);
|
|
108
|
-
var b = new ball(graph,p.x,p.y,radius,styletmp);
|
|
109
|
-
b.vx = 106;
|
|
110
|
-
b.vy = 104;
|
|
111
|
-
balls.push(b);
|
|
112
|
-
|
|
113
|
-
function animate() {
|
|
114
|
-
var bs = balls;
|
|
115
|
-
var len = bs.length;
|
|
116
|
-
//var mvx = 0;
|
|
117
|
-
//var mvy = 0;
|
|
118
|
-
for(var i=0;i<len;i++) {
|
|
119
|
-
var b1 = bs[i];
|
|
120
|
-
b1.vx += b1.ax;
|
|
121
|
-
b1.vy += b1.ay;
|
|
122
|
-
for(var j=i+1;j<len;j++) {
|
|
123
|
-
var b2= bs[j];
|
|
124
|
-
var lx = b1.x() - b2.x();
|
|
125
|
-
var ly = b1.y() - b2.y();
|
|
126
|
-
var l = Math.sqrt(lx * lx + ly * ly);
|
|
127
|
-
if(l <= b1.radius + b2.radius) {
|
|
128
|
-
var vx = b1.vx;
|
|
129
|
-
var vy = b1.vy;
|
|
130
|
-
var vxb = b2.vx;
|
|
131
|
-
var vyb = b2.vy;
|
|
132
|
-
|
|
133
|
-
var angle = Math.atan2(ly,lx);
|
|
134
|
-
var sine = Math.sin(angle);
|
|
135
|
-
var cosine = Math.cos(angle);
|
|
136
|
-
|
|
137
|
-
var x = 0;
|
|
138
|
-
var y = 0;
|
|
139
|
-
|
|
140
|
-
var xb = lx * cosine + ly * sine;
|
|
141
|
-
var yb = ly * cosine - lx * sine;
|
|
142
|
-
|
|
143
|
-
var vx = b1.vx * cosine + b1.vy * sine;
|
|
144
|
-
var vy = b1.vy * cosine - b1.vx * sine;
|
|
145
|
-
var vxb = b2.vx * cosine + b2.vy * sine;
|
|
146
|
-
var vyb = b2.vy * cosine - b2.vx * sine;
|
|
147
|
-
|
|
148
|
-
var vtotal = vx - vxb;
|
|
149
|
-
|
|
150
|
-
vx = ((b1.radius - b2.radius) * vx + 2 * b2.radius * vxb) / (b1.radius + b2.radius);
|
|
151
|
-
vxb = vtotal + vx;
|
|
152
|
-
|
|
153
|
-
var vx1 = vx * cosine - vy * sine;
|
|
154
|
-
var vy1 = vy * cosine + vx * sine;
|
|
155
|
-
|
|
156
|
-
var vx2 = vxb * cosine - vyb * sine;
|
|
157
|
-
var vy2 = vyb * cosine + vxb * sine;
|
|
158
|
-
|
|
159
|
-
b1.vx = vx1;
|
|
160
|
-
b1.vy = vy1;
|
|
161
|
-
b2.vx = vx2;
|
|
162
|
-
b2.vy = vy2;
|
|
163
|
-
}
|
|
164
|
-
}
|
|
165
|
-
var x = b1.x() + b1.vx;
|
|
166
|
-
var maxX = b1.graph.width - b1.radius ;
|
|
167
|
-
if(x <= b1.radius || x >= maxX) {
|
|
168
|
-
//b1.vy -= 0.4;
|
|
169
|
-
b1.vx *= -1;
|
|
170
|
-
}
|
|
171
|
-
x = Math.max(x,b1.radius);
|
|
172
|
-
x = Math.min(maxX,x);
|
|
173
|
-
b1.x(x);
|
|
174
|
-
var y = b1.y() + b1.vy;
|
|
175
|
-
var maxY = b1.graph.height - b1.radius;
|
|
176
|
-
if(y <= b1.radius || y >= maxY) {
|
|
177
|
-
//if(y >= maxY && b1.vy > 0) {b1.vy -= 1;b1.vx -= 0.4;}
|
|
178
|
-
b1.vy *= -1;
|
|
179
|
-
}
|
|
180
|
-
y = Math.max(y,b1.radius);
|
|
181
|
-
y = Math.min(maxY,y);
|
|
182
|
-
b1.y(y);
|
|
183
|
-
}
|
|
184
|
-
graph.needUpdate = true;
|
|
185
|
-
};
|
|
186
|
-
g.on('update', animate);
|
|
187
|
-
}
|
|
188
|
-
function resize() {
|
|
189
|
-
if(graph) {
|
|
190
|
-
graph.width = window.innerWidth - 10;
|
|
191
|
-
graph.height = window.innerHeight - 10;
|
|
192
|
-
}
|
|
193
|
-
}
|
|
194
|
-
|
|
195
|
-
function ball(graph,x,y,radius,style) {
|
|
196
|
-
this.graph = graph;
|
|
197
|
-
this.radius = radius;
|
|
198
|
-
this.center = {x:x,y:y};
|
|
199
|
-
this.shape = graph.createShape('arc',{style:style,center:this.center,radius:this.radius,anticlockwise:true});
|
|
200
|
-
graph.children.add(this.shape);
|
|
201
|
-
this.shape.canMove(true);
|
|
202
|
-
this.vx = 0;
|
|
203
|
-
this.vy = 0;
|
|
204
|
-
this.ax = 0;
|
|
205
|
-
this.ay = 0;
|
|
206
|
-
|
|
207
|
-
this.x = function(x) {
|
|
208
|
-
if(typeof x !== 'undefined') this.center.x = x;
|
|
209
|
-
return this.center.x;
|
|
210
|
-
}
|
|
211
|
-
this.y = function(y) {
|
|
212
|
-
if(typeof y !== 'undefined') this.center.y = y;
|
|
213
|
-
return this.center.y;
|
|
214
|
-
}
|
|
215
|
-
}
|
|
216
|
-
|
|
217
|
-
</script>
|
package/example/base.html
DELETED
|
@@ -1,112 +0,0 @@
|
|
|
1
|
-
<!doctype html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
|
|
5
|
-
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
6
|
-
<style>
|
|
7
|
-
html,body{
|
|
8
|
-
margin:0;
|
|
9
|
-
padding: 0;
|
|
10
|
-
}
|
|
11
|
-
#mycanvas_container{
|
|
12
|
-
overflow: hidden;
|
|
13
|
-
}
|
|
14
|
-
</style>
|
|
15
|
-
|
|
16
|
-
<script type="text/javascript" src="../dist/jmGraph.min.js"></script>
|
|
17
|
-
</head>
|
|
18
|
-
<body>
|
|
19
|
-
<div id="mycanvas_container"></div>
|
|
20
|
-
</body>
|
|
21
|
-
<script type="text/javascript">
|
|
22
|
-
//import jmGraph from "../index.js";
|
|
23
|
-
|
|
24
|
-
var container = document.getElementById('mycanvas_container');
|
|
25
|
-
|
|
26
|
-
var g = jmGraph.create(container, {
|
|
27
|
-
width: 800,
|
|
28
|
-
height: 600,
|
|
29
|
-
mode: '2d',
|
|
30
|
-
style: {
|
|
31
|
-
fill: '#000'
|
|
32
|
-
}
|
|
33
|
-
});
|
|
34
|
-
init(g);
|
|
35
|
-
|
|
36
|
-
function init(g){
|
|
37
|
-
g.style.fill = '#000'; //画布背景
|
|
38
|
-
var style = {
|
|
39
|
-
stroke:'#46BF86',
|
|
40
|
-
fill: '#556662',
|
|
41
|
-
lineWidth: 1.5
|
|
42
|
-
};
|
|
43
|
-
style.shadow = '0,0,10,#fff';
|
|
44
|
-
style.opacity = 0.2;
|
|
45
|
-
//style.lineCap = 'round';
|
|
46
|
-
|
|
47
|
-
//创建一个方块
|
|
48
|
-
|
|
49
|
-
var rect = g.createShape('rect',{
|
|
50
|
-
style:style,
|
|
51
|
-
position: {x:300,y:100},
|
|
52
|
-
width:100,
|
|
53
|
-
height:100
|
|
54
|
-
});
|
|
55
|
-
|
|
56
|
-
var rect2 = g.createShape('rect',{
|
|
57
|
-
style:style,
|
|
58
|
-
position: {x:'50%',y:'50%'},
|
|
59
|
-
width:50,
|
|
60
|
-
height:50
|
|
61
|
-
});
|
|
62
|
-
rect.children.add(rect2);
|
|
63
|
-
|
|
64
|
-
g.children.add(rect);
|
|
65
|
-
rect.canMove(true);
|
|
66
|
-
|
|
67
|
-
// 画二个五角星
|
|
68
|
-
var coordinates = [
|
|
69
|
-
{x:50,y:100},
|
|
70
|
-
{x:250,y:100},
|
|
71
|
-
{x:250,y:50},
|
|
72
|
-
{x:300,y:200},
|
|
73
|
-
{x:200,y:200},
|
|
74
|
-
{x:50,y:300},
|
|
75
|
-
];
|
|
76
|
-
style = g.utils.clone(style);
|
|
77
|
-
var star1 = g.createShape('path',{
|
|
78
|
-
style:style,
|
|
79
|
-
points: coordinates
|
|
80
|
-
});
|
|
81
|
-
g.children.add(star1);
|
|
82
|
-
star1.canMove(true);
|
|
83
|
-
|
|
84
|
-
var coordinates2 = [
|
|
85
|
-
{x:50,y:300},
|
|
86
|
-
{x:250,y:300},
|
|
87
|
-
{x:100,y:350},
|
|
88
|
-
{x:150,y:250},
|
|
89
|
-
{x:200,y:350},
|
|
90
|
-
{x:50,y:300},
|
|
91
|
-
];
|
|
92
|
-
style = g.utils.clone(style);
|
|
93
|
-
delete style.fill;
|
|
94
|
-
var star2 = g.createShape('path',{
|
|
95
|
-
style:style,
|
|
96
|
-
points: coordinates2
|
|
97
|
-
});
|
|
98
|
-
g.children.add(star2);
|
|
99
|
-
star2.canMove(true);
|
|
100
|
-
|
|
101
|
-
function update() {
|
|
102
|
-
if(g.needUpdate) {
|
|
103
|
-
console.log(coordinates);
|
|
104
|
-
g.redraw();
|
|
105
|
-
}
|
|
106
|
-
requestAnimationFrame(update);
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
update();
|
|
110
|
-
}
|
|
111
|
-
</script>
|
|
112
|
-
</html>
|
package/example/canvas.html
DELETED
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
<!doctype html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
|
|
5
|
-
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
6
|
-
<!--<script type="text/javascript" src="../index.js"></script>
|
|
7
|
-
<script type="text/javascript" src="../dist/jmGraph.min.js"></script> -->
|
|
8
|
-
<style>
|
|
9
|
-
html,body {
|
|
10
|
-
margin:0;
|
|
11
|
-
padding:0;
|
|
12
|
-
width:100%;
|
|
13
|
-
height:100%;
|
|
14
|
-
overflow: hidden;
|
|
15
|
-
}
|
|
16
|
-
#mycanvas {
|
|
17
|
-
background-color:#000;
|
|
18
|
-
position: absolute;
|
|
19
|
-
}
|
|
20
|
-
</style>
|
|
21
|
-
|
|
22
|
-
</head>
|
|
23
|
-
<body>
|
|
24
|
-
<canvas id="mycanvas" width="300" height="200">
|
|
25
|
-
</canvas>
|
|
26
|
-
<script>
|
|
27
|
-
var mycanvas = document.getElementById('mycanvas');
|
|
28
|
-
var w = mycanvas.width;
|
|
29
|
-
var h = mycanvas.height;
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
var ctx = mycanvas.getContext('2d');
|
|
33
|
-
function resize(w, h) {
|
|
34
|
-
var size = 3;
|
|
35
|
-
mycanvas.width = w * size;
|
|
36
|
-
mycanvas.height = h * size;
|
|
37
|
-
|
|
38
|
-
mycanvas.style.width = w + 'px';
|
|
39
|
-
mycanvas.style.height = h + 'px';
|
|
40
|
-
ctx.scale(size, size);
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
resize(w, h); resize(w, h); resize(w, h); resize(w, h); resize(w, h);
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
ctx.fillStyle = "rgb(200,0,0)";
|
|
47
|
-
//绘制矩形
|
|
48
|
-
ctx.fillRect (100, 50, 55, 50);
|
|
49
|
-
|
|
50
|
-
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
|
|
51
|
-
ctx.fillRect (150, 80, 55, 50);
|
|
52
|
-
</script>
|
|
53
|
-
</body>
|
|
54
|
-
</html>
|