• R/O
  • HTTP
  • SSH
  • HTTPS

AI004: Commit

サブプロジェクトAI004


Commit MetaInfo

Revisión8986bc8e488f19cb5ec5c2bf18bcdc572d667634 (tree)
Tiempo2014-04-17 23:23:08
Autorhikarupsp <hikarupsp@user...>
Commiterhikarupsp

Log Message

エッジの描画を曲線に変更。
エッジにハンドルポイントを追加。

Cambiar Resumen

Diferencia incremental

--- a/mgcanvas/index.html
+++ b/mgcanvas/index.html
@@ -23,7 +23,7 @@ onload = function() {
2323 var c = document.getElementById("mainCanvas");
2424 mgmain = new MGCanvas(c);
2525
26- /*
26+
2727 mgmain.setGraph([[
2828 "A","B","C","D","E","F",
2929 ],[
@@ -35,7 +35,7 @@ onload = function() {
3535 ["A", "E"],
3636 ["A", "B"],
3737 ]]);
38- */
38+
3939 /*
4040 mgmain.setGraph([[
4141 "A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P",
@@ -78,14 +78,14 @@ onload = function() {
7878 ["A", "P"],
7979 ]]);
8080 */
81-
81+ /*
8282 //Petersen Graph
8383 mgmain.setGraph([[
8484 "A","B","C","D","E","F","G","H","I","J",
8585 ],[
86- ["A", "B"],
87- ["B", "C"],
88- ["C", "D"],
86+ ["A", "B", "AB"],
87+ ["B", "C", "BC"],
88+ ["C", "D", "CD"],
8989 ["D", "E"],
9090 ["E", "A"],
9191 //
@@ -101,7 +101,7 @@ onload = function() {
101101 ["F", "I"],
102102 ["G", "J"],
103103 ]]);
104-
104+ */
105105 /*
106106 mgmain.setGraph([[
107107 "A","B","C","D","E","F","G","H","I","J","K","L","M","N","O",
--- a/mgcanvas/mgcanvas.js
+++ b/mgcanvas/mgcanvas.js
@@ -13,6 +13,7 @@ function MGCanvas(canvasDOMObj){
1313 this.isFrozen = false;
1414 this.nodeList = new Array();
1515 this.edgeList = new Array();
16+ this.selectedNode = null;
1617 this.selectedEdge = null;
1718
1819 var that = this;
@@ -56,6 +57,8 @@ function MGCanvas(canvasDOMObj){
5657 //console.log(p.x + "," + p.y);
5758 var node = that.getNodeAtPointP(p);
5859 that.selectNode(node);
60+ var edge = that.getEdgeAtPointP(p);
61+ that.selectEdge(edge);
5962 that.isMouseDown = true;
6063 };
6164 this.canvas.onmouseup = function (e){
@@ -369,6 +372,17 @@ MGCanvas.prototype = {
369372 }
370373 return null;
371374 },
375+ getEdgeAtPointP: function(p){
376+ var r = new Rectangle(p.x - 10, p.y - 10, 20, 20);
377+
378+ var el = this.edgeList;
379+ for(var i = 0, iLen = el.length; i < iLen; i++){
380+ if(r.isIncludePointP(el[i].centerPoint)){
381+ return el[i];
382+ }
383+ }
384+ return null;
385+ },
372386 selectNode: function(node){
373387 if(this.selectedNode){
374388 this.selectedNode.isSelected = false;
@@ -378,6 +392,15 @@ MGCanvas.prototype = {
378392 }
379393 this.selectedNode = node;
380394 },
395+ selectEdge: function(edge){
396+ if(this.selectedEdge){
397+ this.selectedEdge.isSelected = false;
398+ }
399+ if(edge){
400+ edge.isSelected = true;
401+ }
402+ this.selectedEdge = edge;
403+ },
381404 setIdentifierForSelectedNode: function(str){
382405 if(this.selectedNode){
383406 this.selectedNode.identifier = str;
@@ -408,7 +431,9 @@ MGNode.prototype = {
408431 this.env.context.strokeStyle = this.strokeStyle;
409432 }
410433 this.env.drawCircle(this.position.x, this.position.y, this.size);
411- this.env.drawText(this.identifier.toString(), this.position.x + 10, this.position.y + 10);
434+ if(this.identifier){
435+ this.env.drawText(this.identifier.toString(), this.position.x + 10, this.position.y + 10);
436+ }
412437 },
413438 tick: function(){
414439 var e;
@@ -475,6 +500,8 @@ function MGEdge(env, identifier, node0, node1){
475500 //
476501 this.strokeStyle = "rgba(0, 0, 0, 1)";
477502 this.isSelected = false;
503+ //
504+ this.centerPoint = new Point2D(0, 0);
478505 }
479506 MGEdge.prototype = {
480507 draw: function(){
@@ -484,7 +511,11 @@ MGEdge.prototype = {
484511 this.env.context.strokeStyle = this.strokeStyle;
485512 }
486513 if(this.node0 && this.node1){
487- this.env.drawLineP(this.node0.position, this.node1.position);
514+ this.drawCurvedLineP(this.node0.position, this.node1.position);
515+ this.env.strokeRect(this.centerPoint.x - 8, this.centerPoint.y - 8, 16, 16);
516+ if(this.identifier){
517+ this.env.drawText(this.identifier.toString(), this.centerPoint.x, this.centerPoint.y);
518+ }
488519 }
489520 },
490521 tick: function(){
@@ -499,6 +530,18 @@ MGEdge.prototype = {
499530 this.node1.vector.x -= e.x;
500531 this.node1.vector.y -= e.y;
501532 }
533+ this.centerPoint = new Point2D((this.node0.position.x + this.node1.position.x) / 2, (this.node0.position.y + this.node1.position.y) / 2);
534+ },
535+ drawCurvedLineP: function(p, q){
536+ var that = this;
537+ var d = function(x){ return that.env.drawCoordinatesInInteger(x); };
538+ var v = this.env.getUnitVectorP(p, q);
539+ var w = new Point2D(-(v.y * 50), v.x * 50);
540+ this.env.context.beginPath();
541+ this.env.context.moveTo(d(p.x), d(p.y));
542+ this.env.context.bezierCurveTo(d(this.centerPoint.x + w.x), d(this.centerPoint.y + w.y), d(this.centerPoint.x - w.x), d(this.centerPoint.y - w.y), d(q.x), d(q.y));
543+ //this.env.context.closePath();
544+ this.env.context.stroke();
502545 },
503546 }
504547
Show on old repository browser