jmgraph 3.2.6 → 3.2.8

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.
Files changed (65) hide show
  1. package/README.md +0 -1
  2. package/build/gulpfile.js +143 -0
  3. package/build/package-lock.json +19282 -0
  4. package/build/package.json +71 -0
  5. package/dist/jmgraph.core.min.js +1 -1
  6. package/dist/jmgraph.core.min.js.map +1 -1
  7. package/dist/jmgraph.js +2865 -331
  8. package/dist/jmgraph.min.js +1 -1
  9. package/example/ball.html +217 -0
  10. package/example/base.html +112 -0
  11. package/example/canvas.html +54 -0
  12. package/example/cell.html +284 -0
  13. package/example/controls/arc.html +129 -0
  14. package/example/controls/arrowline.html +78 -0
  15. package/example/controls/bezier.html +223 -0
  16. package/example/controls/img.html +97 -0
  17. package/example/controls/label.html +87 -0
  18. package/example/controls/line.html +173 -0
  19. package/example/controls/prismatic.html +63 -0
  20. package/example/controls/rect.html +64 -0
  21. package/example/controls/resize.html +112 -0
  22. package/example/controls/test.html +136 -0
  23. package/example/es.html +70 -0
  24. package/example/es5module.html +64 -0
  25. package/example/heartarc.html +116 -0
  26. package/example/index.html +47 -0
  27. package/example/js/require.js +5 -0
  28. package/example/love/img/bling/bling.tps +265 -0
  29. package/example/love/img/bling.json +87 -0
  30. package/example/love/img/bling.tps +295 -0
  31. package/example/love/img/doc/bling.gif +0 -0
  32. package/example/love/img/love.json +95 -0
  33. package/example/love/img/love.tps +315 -0
  34. package/example/love/img/qq/qq.tps +399 -0
  35. package/example/love/img/qq.json +242 -0
  36. package/example/love/index.html +40 -0
  37. package/example/love/js/game.js +558 -0
  38. package/example/music.html +211 -0
  39. package/example/node/test.js +138 -0
  40. package/example/pdf.html +187 -0
  41. package/example/progress.html +173 -0
  42. package/example/pso.html +148 -0
  43. package/example/sort.html +816 -0
  44. package/example/tweenjs.html +84 -0
  45. package/example/webgl.html +278 -0
  46. package/example/xfj/img/dr_die.gif +0 -0
  47. package/example/xfj/index.html +332 -0
  48. package/example/xfj/shake.js +49 -0
  49. package/example/xfj/testori.html +76 -0
  50. package/package.json +56 -56
  51. package/src/core/jmControl.js +127 -97
  52. package/src/core/jmEvents.js +2 -2
  53. package/src/core/jmGradient.js +9 -3
  54. package/src/core/jmGraph.js +16 -24
  55. package/src/core/jmPath.js +1 -17
  56. package/src/core/jmUtils.js +6 -0
  57. package/src/lib/webgl/base.js +253 -1
  58. package/src/lib/webgl/core/buffer.js +2 -1
  59. package/src/lib/webgl/core/program.js +2 -2
  60. package/src/lib/webgl/core/texture.js +8 -8
  61. package/src/lib/webgl/gradient.js +11 -38
  62. package/src/lib/webgl/path.js +118 -235
  63. package/src/shapes/jmImage.js +18 -3
  64. package/src/shapes/jmLabel.js +84 -38
  65. package/src/shapes/jmRect.js +5 -2
package/example/xfj/shake.js ADDED
@@ -0,0 +1,49 @@
1
+ function devicemotion() {
2
+
3
+ this.hasDeviceMotion = 'ondeviceorientation' in window;
4
+ }
5
+
6
+ devicemotion.prototype.initEvent = function() {
7
+ if(this.inited) return;
8
+ if(this.hasDeviceMotion) {
9
+ var self = this;
10
+ window.addEventListener('deviceorientation',function(e) {
11
+ self.devicemotionEvent(e);
12
+ }, false);
13
+ }
14
+ this.inited = true;
15
+ return this.hasDeviceMotion;
16
+ }
17
+
18
+ //绑定摇一摇功能
19
+ //如果不支持摇一摇，则会返回false
20
+ devicemotion.prototype.bindShake = function(options) {
21
+ if(!options) return;
22
+
23
+ if(this.hasDeviceMotion) {
24
+ this.shakeOption = options;
25
+ }
26
+ else {
27
+ options.handler && options.handler();
28
+ }
29
+ this.initEvent();
30
+ return this.hasDeviceMotion;
31
+ }
32
+
33
+ devicemotion.prototype.devicemotionEvent = function(e) {
34
+
35
+ //以设备坐标系z轴为轴，旋转alpha度
36
+ //以设备坐标系x轴为轴，旋转beta度
37
+ //已设备坐标系y轴为轴，旋转gamma度
38
+ if(this.shakeOption) {
39
+ var opt = {
40
+ //x: e.accelerationIncludingGravity.x,
41
+ // y: e.accelerationIncludingGravity.y,
42
+ //z: e.accelerationIncludingGravity.z,
43
+ alpha: e.alpha,
44
+ beta: e.beta,
45
+ gamma: e.gamma
46
+ }
47
+ this.shakeOption.handler.call(this, opt);
48
+ }
49
+ }
package/example/xfj/testori.html ADDED
@@ -0,0 +1,76 @@
1
+
2
+ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
3
+ <html>
4
+ <head>
5
+ <title>Device Orientation By PuterJam</title>
6
+
7
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
8
+ </head>
9
+ <body>
10
+ <h1><ruby>设备方向感应测试<rt style="text-align:right;color:#ccc;font-size:10px">By PuterJam</rt></ruby></h1>
11
+ <div style="background:#000;width:400px;height:200px;color:#fff;border-radius:5px;">
12
+ <div id="pointer" style="height:5px;width:5px;background:#fff;position:relative;border-radius:10px;-webkit-transition:all 0.1s ease-in;-moz-transition:all 0.1s ease-in">
13
+
14
+ </div>
15
+ </div>
16
+ <div id="test" style="font-size:12px;-webkit-text-size-adjust:none;margin:6px;"></div>
17
+
18
+
19
+ <script defer>
20
+ function Orientation(selector) {
21
+
22
+ }
23
+
24
+ Orientation.prototype.init = function(){
25
+ window.addEventListener('deviceorientation', this.orientationListener, false);
26
+ window.addEventListener('MozOrientation', this.orientationListener, false);
27
+ window.addEventListener('devicemotion', this.orientationListener, false);
28
+ }
29
+
30
+ Orientation.prototype.orientationListener = function(evt) {
31
+ // For FF3.6+
32
+ if (!evt.gamma && !evt.beta) {
33
+ // angle=radian*180.0/PI 在firefox中x和y是弧度值,
34
+ evt.gamma = (evt.x * (180 / Math.PI)); //转换成角度值,
35
+ evt.beta = (evt.y * (180 / Math.PI)); //转换成角度值
36
+ evt.alpha = (evt.z * (180 / Math.PI)); //转换成角度值
37
+ }
38
+ /* beta: -180..180 (rotation around x axis) */
39
+ /* gamma: -90..90 (rotation around y axis) */
40
+ /* alpha: 0..360 (rotation around z axis) (-180..180) */
41
+
42
+ var gamma = evt.gamma
43
+ var beta = evt.beta
44
+ var alpha = evt.alpha
45
+
46
+ if(evt.accelerationIncludingGravity){
47
+ // window.removeEventListener('deviceorientation', this.orientationListener, false);
48
+ gamma = event.accelerationIncludingGravity.x*10
49
+ beta = -event.accelerationIncludingGravity.y*10
50
+ alpha = event.accelerationIncludingGravity.z*10
51
+ }
52
+
53
+ //var gamma = evt.rotationRate.gamma;
54
+ //var beta = evt.rotationRate.beta;
55
+ //var alpha = evt.rotationRate.beta;
56
+
57
+
58
+
59
+
60
+ if (this._lastGamma != gamma || this._lastBeta != beta) {
61
+ document.querySelector("#test").innerHTML = "x: "+ beta.toFixed(2) + " y: " + gamma.toFixed(2) + " z: " + (alpha != null?alpha.toFixed(2):0)
62
+
63
+
64
+ var style = document.querySelector("#pointer").style;
65
+ style.left = (gamma+20)/40*400 +"px";
66
+ style.top = beta/90 * 100 + 100 +"px";
67
+
68
+
69
+ this._lastGamma = gamma;
70
+ this._lastBeta = beta;
71
+ }
72
+ };
73
+ (new Orientation()).init();
74
+ </script>
75
+ </body>
76
+ </html>
package/package.json CHANGED
@@ -1,56 +1,56 @@
1
- {
2
- "family": "jmgraph",
3
- "name": "jmgraph",
4
- "version": "3.2.6",
5
- "description": "一个简单的canvas画图库",
6
- "homepage": "http://graph.jm47.com/",
7
- "keywords": [
8
- "canvas",
9
- "html5",
10
- "webgl"
11
- ],
12
- "author": "jiamao<haofefe@163.com>",
13
- "engines": {},
14
- "dependencies": {},
15
- "devDependencies": {
16
- "@commitlint/cli": "^7.6.1",
17
- "@commitlint/config-conventional": "^7.6.0",
18
- "canvas": "^2.11.2",
19
- "cz-conventional-changelog": "^2.1.0",
20
- "express": "^4.17.1"
21
- },
22
- "repository": {
23
- "type": "git",
24
- "url": "git+https://github.com/jiamao/jmgraph.git"
25
- },
26
- "main": "./index.js",
27
- "spm": {
28
- "alias": {},
29
- "output": [
30
- "main.js"
31
- ]
32
- },
33
- "licenses": [
34
- {
35
- "type": "MIT",
36
- "url": "https://github.com/jiamao/jmgraph/blob/master/LICENSE"
37
- }
38
- ],
39
- "bugs": {
40
- "url": "https://github.com/jiamao/jmgraph/issues"
41
- },
42
- "directories": {
43
- "example": "example"
44
- },
45
- "scripts": {
46
- "build": "cd build & npm i & gulp & cd ..",
47
- "push": "npm publish --registry=https://registry.npmjs.org",
48
- "dev": "node dev"
49
- },
50
- "license": "MIT",
51
- "config": {
52
- "commitizen": {
53
- "path": "./node_modules/cz-conventional-changelog"
54
- }
55
- }
56
- }
1
+ {
2
+ "family": "jmgraph",
3
+ "name": "jmgraph",
4
+ "version": "3.2.8",
5
+ "description": "一个简单的canvas画图库",
6
+ "homepage": "http://graph.jm47.com/",
7
+ "keywords": [
8
+ "canvas",
9
+ "html5",
10
+ "webgl"
11
+ ],
12
+ "author": "jiamao<haofefe@163.com>",
13
+ "engines": {},
14
+ "dependencies": {},
15
+ "devDependencies": {
16
+ "@commitlint/cli": "^7.6.1",
17
+ "@commitlint/config-conventional": "^7.6.0",
18
+ "canvas": "^2.11.2",
19
+ "cz-conventional-changelog": "^2.1.0",
20
+ "express": "^4.17.1"
21
+ },
22
+ "repository": {
23
+ "type": "git",
24
+ "url": "git+https://github.com/jiamao/jmgraph.git"
25
+ },
26
+ "main": "./index.js",
27
+ "spm": {
28
+ "alias": {},
29
+ "output": [
30
+ "main.js"
31
+ ]
32
+ },
33
+ "licenses": [
34
+ {
35
+ "type": "MIT",
36
+ "url": "https://github.com/jiamao/jmgraph/blob/master/LICENSE"
37
+ }
38
+ ],
39
+ "bugs": {
40
+ "url": "https://github.com/jiamao/jmgraph/issues"
41
+ },
42
+ "directories": {
43
+ "example": "example"
44
+ },
45
+ "scripts": {
46
+ "build": "cd build & npm i & gulp & cd ..",
47
+ "push": "npm publish --registry=https://registry.npmjs.org",
48
+ "dev": "node dev"
49
+ },
50
+ "license": "MIT",
51
+ "config": {
52
+ "commitizen": {
53
+ "path": "./node_modules/cz-conventional-changelog"
54
+ }
55
+ }
56
+ }
package/src/core/jmControl.js CHANGED
@@ -4,7 +4,7 @@ import {jmList} from "./jmList.js";
4
4
  import {jmGradient} from "./jmGradient.js";
5
5
  import {jmShadow} from "./jmShadow.js";
6
6
  import {jmProperty} from "./jmProperty.js";
7
- //import WebglPath from "../lib/webgl/path.js";
7
+ import WebglPath from "../lib/webgl/path.js";
8
8
 
9
9
  //样式名称，也当做白名单使用
10
10
  const jmStyleMap = {
@@ -55,16 +55,17 @@ export default class jmControl extends jmProperty {
55
55
 
56
56
  this.graph = params.graph || null;
57
57
  this.zIndex = params.zIndex || 0;
58
- this.interactive = typeof params.interactive == 'undefined'? true : params.interactive;
58
+ this.interactive = typeof params.interactive == 'undefined'? false : params.interactive;
59
59
 
60
60
  // webgl模式
61
- /*if(this.mode === 'webgl') {
61
+ if(this.mode === 'webgl') {
62
62
  this.webglControl = new WebglPath(this.graph, {
63
63
  style: this.style,
64
+ control: this,
64
65
  isRegular: params.isRegular,
65
66
  needCut: params.needCut
66
67
  });
67
- }*/
68
+ }
68
69
 
69
70
  this.initializing();
70
71
 
@@ -142,7 +143,7 @@ export default class jmControl extends jmProperty {
142
143
  * @type {boolean}
143
144
  */
144
145
  get interactive() {
145
- let s = this.property('interactive');
146
+ const s = this.property('interactive');
146
147
  return s;
147
148
  }
148
149
  set interactive(v) {
@@ -205,7 +206,6 @@ export default class jmControl extends jmProperty {
205
206
  return s;
206
207
  }
207
208
  set zIndex(v) {
208
- this.needUpdate = true;
209
209
  this.property('zIndex', v);
210
210
  this.children.sort();//层级发生改变，需要重新排序
211
211
  this.needUpdate = true;
@@ -389,11 +389,6 @@ export default class jmControl extends jmProperty {
389
389
  else if(mpname) {
390
390
 
391
391
  if(this.webglControl) {
392
- //只有存在白名单中才处理
393
- //颜色转换
394
- if(t == 'string' && ['fillStyle', 'strokeStyle', 'shadowColor'].indexOf(mpname) > -1) {
395
- styleValue = jmUtils.hexToRGBA(styleValue);
396
- }
397
392
 
398
393
  this.webglControl.setStyle(mpname, styleValue);
399
394
  }
@@ -422,41 +417,36 @@ export default class jmControl extends jmProperty {
422
417
  }
423
418
  //平移
424
419
  case 'translate' : {
425
- this.context.translate && this.context.translate(styleValue.x, styleValue.y);
426
420
  break;
427
421
  }
428
422
  //旋转
429
423
  case 'rotation' : {
430
- if(!styleValue.angle) break;
431
- //旋 转先移位偏移量
432
- let tranX = 0;
433
- let tranY = 0;
424
+ if(typeof styleValue.angle === 'undefined' || isNaN(styleValue.angle)) break;
425
+ styleValue = this.getRotation(styleValue);
426
+
434
427
  //旋转，则移位，如果有中心位则按中心旋转，否则按左上角旋转
435
428
  //这里只有style中的旋转才能生效，不然会导至子控件多次旋转
436
- if(styleValue.point) {
437
- let bounds = this.absoluteBounds?this.absoluteBounds:this.getAbsoluteBounds();
438
- styleValue = this.getRotation(styleValue);
439
-
440
- tranX = styleValue.rotateX + bounds.left;
441
- tranY = styleValue.rotateY + bounds.top;
442
- }
443
-
444
- if(tranX!=0 || tranY != 0) this.context.translate && this.context.translate(tranX,tranY);
445
- this.context.rotate(styleValue.angle);
446
- if(tranX!=0 || tranY != 0) this.context.translate && this.context.translate(-tranX,-tranY);
429
+ styleValue = this.toAbsolutePoint(styleValue);
430
+
431
+ this.context.translate && this.context.translate(styleValue.x, styleValue.y);
432
+ this.context.rotate && this.context.rotate(styleValue.angle);
433
+ this.context.translate && this.context.translate(-styleValue.x, -styleValue.y);
447
434
  break;
448
435
  }
449
436
  case 'transform' : {
437
+ if(!this.context.transform) break;
450
438
  if(Array.isArray(styleValue)) {
451
439
  this.context.transform.apply(this.context, styleValue);
452
440
  }
453
441
  else if(typeof styleValue == 'object') {
454
- this.context.transform(styleValue.scaleX,//水平缩放
455
- styleValue.skewX,//水平倾斜
456
- styleValue.skewY,//垂直倾斜
457
- styleValue.scaleY,//垂直缩放
458
- styleValue.offsetX,//水平位移
459
- styleValue.offsetY);//垂直位移
442
+ this.context.transform(
443
+ styleValue.scaleX || 1,//水平缩放
444
+ styleValue.skewX || 0,//水平倾斜
445
+ styleValue.skewY || 0,//垂直倾斜
446
+ styleValue.scaleY || 1,//垂直缩放
447
+ styleValue.offsetX || 0,//水平位移
448
+ styleValue.offsetY || 0//垂直位移
449
+ );
460
450
  }
461
451
  break;
462
452
  }
@@ -523,8 +513,7 @@ export default class jmControl extends jmProperty {
523
513
  }
524
514
  }
525
515
  else if(this.points && this.points.length > 0) {
526
- for(let i in this.points) {
527
- let p = this.points[i];
516
+ for(const p of this.points) {
528
517
  if(typeof rect.left === 'undefined' || rect.left > p.x) {
529
518
  rect.left = p.x;
530
519
  }
@@ -555,6 +544,7 @@ export default class jmControl extends jmProperty {
555
544
  if(!rect.bottom) rect.bottom = 0;
556
545
  rect.width = rect.right - rect.left;
557
546
  rect.height = rect.bottom - rect.top;
547
+
558
548
  return this.bounds=rect;
559
549
  }
560
550
 
@@ -579,7 +569,7 @@ export default class jmControl extends jmProperty {
579
569
  local.width = this.width;
580
570
  local.height = this.height;
581
571
 
582
- let margin = jmUtils.clone(this.style.margin, {});
572
+ const margin = jmUtils.clone(this.style.margin, {});
583
573
  margin.left = (margin.left || 0);
584
574
  margin.top = (margin.top || 0);
585
575
  margin.right = (margin.right || 0);
@@ -595,38 +585,39 @@ export default class jmControl extends jmProperty {
595
585
  local.top = margin.top;
596
586
  }
597
587
 
598
- if(!this.parent) return local;//没有父节点则直接返回
599
- let parentBounds = this.parent.getBounds();
588
+ if(this.parent) {
589
+ const parentBounds = this.parent.getBounds();
600
590
 
601
- //处理百分比参数
602
- if(jmUtils.checkPercent(local.left)) {
603
- local.left = jmUtils.percentToNumber(local.left) * parentBounds.width;
604
- }
605
- if(jmUtils.checkPercent(local.top)) {
606
- local.top = jmUtils.percentToNumber(local.top) * parentBounds.height;
607
- }
608
-
609
- //如果没有指定宽度或高度，则按百分之百计算其父宽度或高度
610
- if(jmUtils.checkPercent(local.width)) {
611
- local.width = jmUtils.percentToNumber(local.width) * parentBounds.width;
612
- }
613
- if(jmUtils.checkPercent(local.height)) {
614
- local.height = jmUtils.percentToNumber(local.height) * parentBounds.height;
615
- }
616
- //处理中心点
617
- if(local.center) {
618
591
  //处理百分比参数
619
- if(jmUtils.checkPercent(local.center.x)) {
620
- local.center.x = jmUtils.percentToNumber(local.center.x) * parentBounds.width;
592
+ if(jmUtils.checkPercent(local.left)) {
593
+ local.left = jmUtils.percentToNumber(local.left) * parentBounds.width;
621
594
  }
622
- if(jmUtils.checkPercent(local.center.y)) {
623
- local.center.y = jmUtils.percentToNumber(local.center.y) * parentBounds.height;
595
+ if(jmUtils.checkPercent(local.top)) {
596
+ local.top = jmUtils.percentToNumber(local.top) * parentBounds.height;
624
597
  }
625
- }
626
- if(local.radius) {
627
- //处理百分比参数
628
- if(jmUtils.checkPercent(local.radius)) {
629
- local.radius = jmUtils.percentToNumber(local.radius) * Math.min(parentBounds.width, parentBounds.height);
598
+
599
+ //如果没有指定宽度或高度，则按百分之百计算其父宽度或高度
600
+ if(jmUtils.checkPercent(local.width)) {
601
+ local.width = jmUtils.percentToNumber(local.width) * parentBounds.width;
602
+ }
603
+ if(jmUtils.checkPercent(local.height)) {
604
+ local.height = jmUtils.percentToNumber(local.height) * parentBounds.height;
605
+ }
606
+ //处理中心点
607
+ if(local.center) {
608
+ //处理百分比参数
609
+ if(jmUtils.checkPercent(local.center.x)) {
610
+ local.center.x = jmUtils.percentToNumber(local.center.x) * parentBounds.width;
611
+ }
612
+ if(jmUtils.checkPercent(local.center.y)) {
613
+ local.center.y = jmUtils.percentToNumber(local.center.y) * parentBounds.height;
614
+ }
615
+ }
616
+ if(local.radius) {
617
+ //处理百分比参数
618
+ if(jmUtils.checkPercent(local.radius)) {
619
+ local.radius = jmUtils.percentToNumber(local.radius) * Math.min(parentBounds.width, parentBounds.height);
620
+ }
630
621
  }
631
622
  }
632
623
  return local;
@@ -636,34 +627,54 @@ export default class jmControl extends jmProperty {
636
627
  * 获取当前控制的旋转信息
637
628
  * @returns {object} 旋转中心和角度
638
629
  */
639
- getRotation(rotation) {
640
- rotation = rotation || this.style.rotation;
630
+ getRotation(rotation, bounds = null) {
631
+ rotation = rotation || jmUtils.clone(this.style.rotation);
632
+
641
633
  if(!rotation) {
642
634
  //如果本身没有，则可以继承父级的
643
635
  rotation = this.parent && this.parent.getRotation?this.parent.getRotation():null;
644
636
  //如果父级有旋转，则把坐标转换为当前控件区域
645
637
  if(rotation) {
646
- let bounds = this.getBounds();
647
- rotation.rotateX -= bounds.left;
648
- rotation.rotateY -= bounds.top;
638
+ bounds = bounds || this.getBounds();
639
+ rotation.x -= bounds.left;
640
+ rotation.y -= bounds.top;
649
641
  }
650
642
  }
651
643
  else {
652
- let bounds = this.getBounds();
653
- rotation.rotateX = rotation.point.x;
654
- if(jmUtils.checkPercent(rotation.rotateX)) {
655
- rotation.rotateX = jmUtils.percentToNumber(rotation.rotateX) * bounds.width;
644
+ bounds = bounds || this.getBounds();
645
+ if(typeof rotation.x === 'undefined') rotation.x = '50%';
646
+ if(typeof rotation.y === 'undefined') rotation.y = '50%';
647
+ if(jmUtils.checkPercent(rotation.x)) {
648
+ rotation.x = jmUtils.percentToNumber(rotation.x) * bounds.width;
656
649
  }
657
-
658
- rotation.rotateY = rotation.point.y;
659
- if(jmUtils.checkPercent(rotation.rotateY)) {
660
- rotation.rotateY = jmUtils.percentToNumber(rotation.rotateY) * bounds.height;
650
+ if(jmUtils.checkPercent(rotation.y)) {
651
+ rotation.y = jmUtils.percentToNumber(rotation.y) * bounds.height;
661
652
  }
662
653
  }
663
654
  return rotation;
664
655
 
665
656
  }
666
657
 
658
+ // 计算位移偏移量
659
+ getTranslate(translate, bounds = null) {
660
+ translate = translate || this.style.translate;
661
+ if(!translate) return {x: 0, y: 0};
662
+ const result = {
663
+ x: translate.x || 0,
664
+ y: translate.y || 0
665
+ }
666
+
667
+ if(jmUtils.checkPercent(result.x)) {
668
+ if(!bounds && this.parent) bounds = this.parent.getBounds();
669
+ result.x = jmUtils.percentToNumber(result.x) * bounds.width;
670
+ }
671
+ if(jmUtils.checkPercent(result.y)) {
672
+ if(!bounds && this.parent) bounds = this.parent.getBounds();
673
+ result.y = jmUtils.percentToNumber(result.y) * bounds.height;
674
+ }
675
+ return result;
676
+ }
677
+
667
678
  /**
668
679
  * 移除当前控件
669
680
  * 如果是VML元素，则调用其删除元素
@@ -794,6 +805,22 @@ export default class jmControl extends jmProperty {
794
805
  return rec;
795
806
  }
796
807
 
808
+ /**
809
+ * 把当前控制内部坐标转为canvas绝对定位坐标
810
+ *
811
+ * @method toAbsolutePoint
812
+ * @param {x: number, y: number} 内部坐标
813
+ */
814
+ toAbsolutePoint(point) {
815
+ if(point.x || point.y) {
816
+ const bounds = this.absoluteBounds?this.absoluteBounds:this.getAbsoluteBounds();
817
+
818
+ point.x = (point.x||0) + bounds.left;
819
+ point.y = (point.y||0) + bounds.top;
820
+ }
821
+ return point;
822
+ }
823
+
797
824
  /**
798
825
  * 画控件前初始化
799
826
  * 执行beginPath开始控件的绘制
@@ -803,7 +830,7 @@ export default class jmControl extends jmProperty {
803
830
  beginDraw() {
804
831
  this.getLocation(true);//重置位置信息
805
832
  this.context.beginPath && this.context.beginPath();
806
- //if(this.webglControl && this.webglControl.beginDraw) this.webglControl.beginDraw();
833
+ if(this.webglControl && this.webglControl.beginDraw) this.webglControl.beginDraw();
807
834
  }
808
835
 
809
836
  /**
@@ -814,23 +841,24 @@ export default class jmControl extends jmProperty {
814
841
  endDraw() {
815
842
  //如果当前为封闭路径
816
843
  if(this.style.close) {
817
- //if(this.webglControl) this.webglControl.closePath();
844
+ if(this.webglControl) this.webglControl.closePath();
818
845
  this.context.closePath && this.context.closePath();
819
846
  }
820
847
 
821
- if(this.style['fill']) {
822
- /*if(this.webglControl) {
848
+ const fill = this.style['fill'] || this.style['fillStyle'];
849
+ if(fill) {
850
+ if(this.webglControl) {
823
851
  const bounds = this.getBounds();
824
852
  this.webglControl.fill(bounds);
825
- }*/
853
+ }
826
854
  this.context.fill && this.context.fill();
827
855
  }
828
- if(this.style['stroke'] || (!this.style['fill'] && !this.is('jmGraph'))) {
829
- //if(this.webglControl) this.webglControl.stroke();
856
+ if(this.style['stroke'] || (!fill && !this.is('jmGraph'))) {
857
+ if(this.webglControl) this.webglControl.stroke();
830
858
  this.context.stroke && this.context.stroke();
831
859
  }
832
860
 
833
- //if(this.webglControl && this.webglControl.endDraw) this.webglControl.endDraw();
861
+ if(this.webglControl && this.webglControl.endDraw) this.webglControl.endDraw();
834
862
 
835
863
  this.needUpdate = false;
836
864
  }
@@ -845,13 +873,13 @@ export default class jmControl extends jmProperty {
845
873
  if(this.points && this.points.length > 0) {
846
874
  //获取当前控件的绝对位置
847
875
  const bounds = this.parent && this.parent.absoluteBounds?this.parent.absoluteBounds:this.absoluteBounds;
848
- /*if(this.webglControl) {
876
+ if(this.webglControl) {
849
877
  this.webglControl.setParentBounds(bounds);
850
878
  this.webglControl.draw([
851
879
  ...this.points
852
880
  ]);
853
- }*/
854
- if(this.context && this.context.moveTo) {
881
+ }
882
+ else if(this.context && this.context.moveTo) {
855
883
  this.context.moveTo(this.points[0].x + bounds.left,this.points[0].y + bounds.top);
856
884
  let len = this.points.length;
857
885
  for(let i=1; i < len;i++) {
@@ -1037,8 +1065,8 @@ export default class jmControl extends jmProperty {
1037
1065
  return true;
1038
1066
  }
1039
1067
 
1040
- let bounds = this.getBounds();
1041
- let rotation = this.getRotation();//获取当前旋转参数
1068
+ const bounds = this.getBounds();
1069
+ const rotation = this.getRotation(null, bounds);//获取当前旋转参数
1042
1070
  let ps = this.points;
1043
1071
  //如果不是路径组成，则采用边界做为顶点
1044
1072
  if(!ps || !ps.length) {
@@ -1058,27 +1086,27 @@ export default class jmControl extends jmProperty {
1058
1086
  ps = jmUtils.clone(ps, true);//拷贝一份数据
1059
1087
  //rotateX ,rotateY 是相对当前控件的位置
1060
1088
  ps = jmUtils.rotatePoints(ps, {
1061
- x: rotation.rotateX + bounds.left,
1062
- y: rotation.rotateY + bounds.top
1089
+ x: rotation.x + bounds.left,
1090
+ y: rotation.y + bounds.top
1063
1091
  }, rotation.angle);
1064
1092
  }
1065
1093
  //如果当前路径不是实心的
1066
1094
  //就只用判断点是否在边上即可
1067
1095
  if(ps.length > 2 && (!this.style['fill'] || this.style['stroke'])) {
1068
1096
  let i = 0;
1069
- let count = ps.length;
1097
+ const count = ps.length;
1070
1098
  for(let j = i+1; j <= count; j = (++i + 1)) {
1071
1099
  //如果j超出最后一个
1072
1100
  //则当为封闭图形时跟第一点连线处理.否则直接返回false
1073
1101
  if(j == count) {
1074
1102
  if(this.style.close) {
1075
- let r = jmUtils.pointInPolygon(p,[ps[i],ps[0]], pad);
1103
+ const r = jmUtils.pointInPolygon(p,[ps[i],ps[0]], pad);
1076
1104
  if(r) return true;
1077
1105
  }
1078
1106
  }
1079
1107
  else {
1080
1108
  //判断是否在点i,j连成的线上
1081
- let s = jmUtils.pointInPolygon(p,[ps[i],ps[j]], pad);
1109
+ const s = jmUtils.pointInPolygon(p,[ps[i],ps[j]], pad);
1082
1110
  if(s) return true;
1083
1111
  }
1084
1112
  }
@@ -1086,7 +1114,7 @@ export default class jmControl extends jmProperty {
1086
1114
  if(!this.style['fill']) return false;
1087
1115
  }
1088
1116
 
1089
- let r = jmUtils.pointInPolygon(p,ps, pad);
1117
+ const r = jmUtils.pointInPolygon(p,ps, pad);
1090
1118
  return r;
1091
1119
  }
1092
1120
 
@@ -1116,7 +1144,7 @@ export default class jmControl extends jmProperty {
1116
1144
 
1117
1145
  const srcElement = args.srcElement || args.target;
1118
1146
 
1119
- const position = jmUtils.getEventPosition(args, graph.scaleSize);//初始化事件位置
1147
+ const position = jmUtils.getEventPosition(args);//初始化事件位置
1120
1148
 
1121
1149
  args = {
1122
1150
  position: position,
@@ -1387,6 +1415,8 @@ export default class jmControl extends jmProperty {
1387
1415
  graph.unbind('touchend',this.__mvMonitor.mu);
1388
1416
  this.unbind('touchstart',this.__mvMonitor.md);
1389
1417
  }
1418
+
1419
+ this.interactive = true;// 如果可以移动，则响应事件
1390
1420
  return this;
1391
1421
  }
1392
1422
  };