JAVAC.JP
HOSHI TETSUYA 星鉄矢
2005/07/25
hossy@javac.jp
http://www.javac.jp
Google
WWW を検索 WWW.JAVAC.JP を検索

5-2 ノードとエッジのみの描画

まず最初に、最も単純なノードとエッジの描画をしてみましょう。
保持するデータはXMLの形式で以下のようなデータを用います。
<?xml version="1.0" encoding="UTF-8" ?>
<graph>
    <pointlist>
        <point id="0" x="-100" y="-100" />
        <point id="1" x="100"  y="-100" />
        <point id="2" x="-100" y="100"  />
        <point id="3" x="100"  y="100"  />
        <point id="4" x="0"    y="0"    />
    </pointlist>
    <linelist>
        <line id="0" point1="0" point2="1" />
        <line id="1" point1="1" point2="4" />
        <line id="2" point1="4" point2="0" />
        <line id="3" point1="0" point2="2" />
        <line id="4" point1="0" point2="3" />
    </linelist>
</graph>
これを描画すると以下のようになります。
example
この描画には、これまで述べてきた、リンケージのattachMovie・XML通信などを用います。

ソースは以下です。5つのASファイルを用います。

タイムラインにincludeされるmain.asファイルは以下です。
main.as
---
var graph:GraphControl=new GraphControl(this);
stop();
次にEventDispatcher用に拡張したExXMLクラスです。
ExXML.as
---
class ExXML extends XML{
    private var ignoreWhite=true
    var addEventListener:Function;
    var removeEventListener:Function;
    private var dispatchEvent:Function;
}
メインのコントロールの役割を務める、GraphControlクラス
GraphControl
---
import mx.events.EventDispatcher;

class GraphControl{
    private var path:MovieClip;
    private var stageMc:MovieClip;
    private var dataStorage:GraphDataStorage;
    private var drawing:DrawingControl;
    private var ex:ExXML;
    private var STAGE_MC_DEPTH:Number=100;

    function GraphControl(path:MovieClip){
        this.path=path;
        path.createEmptyMovieClip("stage_mc",STAGE_MC_DEPTH);
        stageMc=path.stage_mc;
        stageMc._x=320;
        stageMc._y=240;
        dataStorage=new GraphDataStorage();
        drawing=new DrawingControl(stageMc);
        loadGraphData("GraphData.xml");
    }

    private function loadGraphData(address:String):Void{
        ex=new ExXML();
        EventDispatcher.initialize(ex);
        ex.onLoad=function(){
            var lo:Object=new Object();
            lo.target=this;
            lo.type="onLoadXML";
            this.dispatchEvent(lo);
        };
        ex.addEventListener("onLoadXML",this);
        ex.load(address);
    }

    public function onLoadXML():Void{
        var arr:Array=ex.firstChild.childNodes;
        var pointNodes:Array;
        var lineNodes:Array;
        for(var i:Number=0;i<arr.length;i++){
            var node:XMLNode=XMLNode(arr[i]);
            if(node.nodeName=="pointlist"){
                pointNodes=node.childNodes;
            }else if(node.nodeName=="linelist"){
                lineNodes=node.childNodes;
            }else{
                trace("XMLNode is invalid form.");
            }
        }
        for(var i:Number=0;i<pointNodes.length;i++){
            var node:XMLNode=XMLNode(pointNodes[i]);
            if(node.nodeName=="point"){
                var o:Object=node.attributes;
                var id:String=String(o.id);
                var x:Number=Number(o.x);
                var y:Number=Number(o.y);
                var index:Number=dataStorage.addPoint(id,x,y);
            }else{
                trace("XMLNode is invalid form.");
            }
        }
        for(var i:Number=0;i<lineNodes.length;i++){
            var node:XMLNode=XMLNode(lineNodes[i]);
            if(node.nodeName=="line"){
                var o:Object=node.attributes;
                var id:String=String(o.id);
                var point1:String=String(o.point1);
                var point2:String=String(o.point2);
                var index:Number=dataStorage.addLine(id,point1,point2);
            }else{
                trace("XMLNode is invalid form.");
            }
        }
        drawPoints();
        drawLines();
    }

    private function drawPoints():Void{
        var len:Number=dataStorage.getPointListLength();
        for(var i:Number=0;i<len;i++){
            var x:Number=dataStorage.getPointPosX(i);
            var y:Number=dataStorage.getPointPosY(i);
            var size:Number=20;
            drawing.drawOval(x,y,size);
        }
    }

    private function drawLines():Void{
        var len:Number=dataStorage.getLineListLength();
        for(var i:Number=0;i<len;i++){
            var index1:Number=dataStorage.getLineIndex1(i);
            var index2:Number=dataStorage.getLineIndex2(i);
            var x1:Number=dataStorage.getPointPosX(index1);
            var y1:Number=dataStorage.getPointPosY(index1);
            var x2:Number=dataStorage.getPointPosX(index2);
            var y2:Number=dataStorage.getPointPosY(index2);
            var size:Number=0;
            var color16:Number=0x000000;
            drawing.drawLine(x1,y1,x2,y2,size,color16);
        }
    }
}
リンケージovalをattachMovieしたり、線を描画する機能は、DrawingControlクラスにまとめてあります。
DrawingControl.as
---
class DrawingControl{
    private var path:MovieClip;
    private var ovalBase:MovieClip;
    private var lineBase:MovieClip;
    private var ovalDepth:Number;
    private var lineDepth:Number;
    private var OVAL_BASE_DEPTH:Number=500;
    private var LINE_BASE_DEPTH:Number=300;
    private var OVAL_START_DEPTH:Number=1;
    private var LINE_START_DEPTH:Number=1;

    function DrawingControl(path:MovieClip){
        this.path=path;
        path.createEmptyMovieClip("oval_base",OVAL_BASE_DEPTH);
        ovalBase=path.oval_base;
        path.createEmptyMovieClip("line_base",LINE_BASE_DEPTH);
        lineBase=path.line_base;
        ovalDepth=OVAL_START_DEPTH;
        lineDepth=LINE_START_DEPTH;
    }

    function drawOval(x:Number,y:Number,size:Number):Void{
        var depth:Number=ovalDepth;
        ovalDepth++;
        var linkage:String="oval";
        var mcname:String="oval"+String(depth);
        ovalBase.attachMovie(linkage,mcname,depth);
        var mc:MovieClip=ovalBase[mcname];
        mc._x=x;
        mc._y=y;
        mc._xscale=size;
        mc._yscale=size;
    }

    function drawLine(x1:Number,y1:Number,x2:Number,y2:Number
                            ,size:Number,color16:Number):Void{
        var depth:Number=lineDepth;
        lineDepth++;
        var mcname:String="line"+depth;
        lineBase.createEmptyMovieClip(mcname,depth);
        var mc:MovieClip=lineBase[mcname];
        mc.lineStyle(size,color16);
        mc.moveTo(x1,y1);
        mc.lineTo(x2,y2);
    }
}
最後に今回のDataStorageです。ノードとエッジを保持するにあたって、最もシンプルな形をとっています。
GraphDataStorage.as
---
class GraphDataStorage{
    private var pointList:Array;
    private var lineList:Array;

    function GraphDataStorage(){
        reset();
    }

    public function reset():Void{
        pointList=new Array();
        lineList=new Array();
    }

    public function getPointListLength():Number{
        return pointList.length;
    }

    public function getLineListLength():Number{
        return lineList.length;
    }

    public function addPoint(id:String,x:Number,y:Number):Number{
        var o:Object=new Object();
        o.id=id;
        o.x=x;
        o.y=y;
        pointList.push(o);
        return getPointListLength()-1;
    }

    public function addLine(id:String,point1:String,point2:String):Number{
        var o:Object=new Object();
        o.id=id;
        o.point1=point1;
        o.point2=point2;
        lineList.push(o);
        return getLineListLength()-1;
    }

    private function getPointIndexFromId(id:String):Number{
        var ret:Number;
        for(var i:Number=0;i<pointList.length;i++){
            var targetId:String=String(pointList[i].id);
            if(id==targetId){
                ret=i;
                break;
            }
        }
        return ret;
    }

    public function getPointId(index:Number):String{
        return String(pointList[index].id);
    }

    public function getPointPosX(index:Number):Number{
        return Number(pointList[index].x);
    }

    public function getPointPosY(index:Number):Number{
        return Number(pointList[index].y);
    }

    public function getLineId(index:Number):String{
        return String(lineList[index].id);
    }

    public function getLineIndex1(index:Number):Number{
        var point1:String=String(lineList[index].point1);
        return getPointIndexFromId(point1);
    }

    public function getLineIndex2(index:Number):Number{
        var point2:String=String(lineList[index].point2);
        return getPointIndexFromId(point2);
    }
}
ここで、DataStorageに関して詳しく考えてみたいです。
上記のDataStorageは、XMLから読み込んだ始点・終点をそのまま保持し、呼び出されるたびにpointListの中を走査し、該当するindexを吐き出していますが、pointListの量がもっと多くなることを考えると、この仕組みでは能率が悪いと言えます。
具体的には、始点・終点に該当するpointList内のpointのindexをlineListに保持させるメソッドを用意し、GraphControlから全てのノード・エッジの読み込みを終了した後に呼び出すように書き換えます。
GraphDataStorage.as
---
class GraphDataStorage{
    private var pointList:Array;
    private var lineList:Array;

    function GraphDataStorage(){
        reset();
    }

    public function reset():Void{
        pointList=new Array();
        lineList=new Array();
    }

    public function getPointListLength():Number{
        return pointList.length;
    }

    public function getLineListLength():Number{
        return lineList.length;
    }

    public function addPoint(id:String,x:Number,y:Number):Number{
        var o:Object=new Object();
        o.id=id;
        o.x=x;
        o.y=y;
        pointList.push(o);
        return getPointListLength()-1;
    }

    public function addLine(id:String,point1:String,point2:String):Number{
        var o:Object=new Object();
        o.id=id;
        o.point1=point1;
        o.point2=point2;
        lineList.push(o);
        return getLineListLength()-1;
    }

    private function addPointIndexToLine(index:Number):Void{
        var point1:String=String(lineList[index].point1);
        var point2:String=String(lineList[index].point2);
        lineList[index].index1=getPointIndexFromId(point1);
        lineList[index].index2=getPointIndexFromId(point2);
    }

    public function addPointIndexToLineLists():Void{
        var len:Number=getLineListLength();
        for(var i:Number=0;i<len;i++){
            addPointIndexToLine(i);
        }
    }

    private function getPointIndexFromId(id:String):Number{
        var ret:Number;
        for(var i:Number=0;i<pointList.length;i++){
            var targetId:String=String(pointList[i].id);
            if(id==targetId){
                ret=i;
                break;
            }
        }
        return ret;
    }

    public function getPointId(index:Number):String{
        return String(pointList[index].id);
    }

    public function getPointPosX(index:Number):Number{
        return Number(pointList[index].x);
    }

    public function getPointPosY(index:Number):Number{
        return Number(pointList[index].y);
    }

    public function getLineId(index:Number):String{
        return String(lineList[index].id);
    }

    public function getLineIndex1(index:Number):Number{
        return Number(lineList[index].index1);
    }

    public function getLineIndex2(index:Number):Number{
        return Number(lineList[index].index2);
    }
}

GraphControl
---
import mx.events.EventDispatcher;

class GraphControl{
    private var path:MovieClip;
    private var stageMc:MovieClip;
    private var dataStorage:GraphDataStorage;
    private var drawing:DrawingControl;
    private var ex:ExXML;
    private var STAGE_MC_DEPTH:Number=100;

    function GraphControl(path:MovieClip){
        this.path=path;
        path.createEmptyMovieClip("stage_mc",STAGE_MC_DEPTH);
        stageMc=path.stage_mc;
        stageMc._x=320;
        stageMc._y=240;
        dataStorage=new GraphDataStorage();
        drawing=new DrawingControl(stageMc);
        loadGraphData("GraphData.xml");
    }

    private function loadGraphData(address:String):Void{
        ex=new ExXML();
        EventDispatcher.initialize(ex);
        ex.onLoad=function(){
            var lo:Object=new Object();
            lo.target=this;
            lo.type="onLoadXML";
            this.dispatchEvent(lo);
        };
        ex.addEventListener("onLoadXML",this);
        ex.load(address);
    }

    public function onLoadXML():Void{
        var arr:Array=ex.firstChild.childNodes;
        var pointNodes:Array;
        var lineNodes:Array;
        for(var i:Number=0;i<arr.length;i++){
            var node:XMLNode=XMLNode(arr[i]);
            if(node.nodeName=="pointlist"){
                pointNodes=node.childNodes;
            }else if(node.nodeName=="linelist"){
                lineNodes=node.childNodes;
            }else{
                trace("XMLNode is invalid form.");
            }
        }
        for(var i:Number=0;i<pointNodes.length;i++){
            var node:XMLNode=XMLNode(pointNodes[i]);
            if(node.nodeName=="point"){
                var o:Object=node.attributes;
                var id:String=String(o.id);
                var x:Number=Number(o.x);
                var y:Number=Number(o.y);
                var index:Number=dataStorage.addPoint(id,x,y);
            }else{
                trace("XMLNode is invalid form.");
            }
        }
        for(var i:Number=0;i<lineNodes.length;i++){
            var node:XMLNode=XMLNode(lineNodes[i]);
            if(node.nodeName=="line"){
                var o:Object=node.attributes;
                var id:String=String(o.id);
                var point1:String=String(o.point1);
                var point2:String=String(o.point2);
                var index:Number=dataStorage.addLine(id,point1,point2);
            }else{
                trace("XMLNode is invalid form.");
            }
        }
        dataStorage.addPointIndexToLineLists();
        drawPoints();
        drawLines();
    }

    private function drawPoints():Void{
        var len:Number=dataStorage.getPointListLength();
        for(var i:Number=0;i<len;i++){
            var x:Number=dataStorage.getPointPosX(i);
            var y:Number=dataStorage.getPointPosY(i);
            var size:Number=20;
            drawing.drawOval(x,y,size);
        }
    }

    private function drawLines():Void{
        var len:Number=dataStorage.getLineListLength();
        for(var i:Number=0;i<len;i++){
            var index1:Number=dataStorage.getLineIndex1(i);
            var index2:Number=dataStorage.getLineIndex2(i);
            var x1:Number=dataStorage.getPointPosX(index1);
            var y1:Number=dataStorage.getPointPosY(index1);
            var x2:Number=dataStorage.getPointPosX(index2);
            var y2:Number=dataStorage.getPointPosY(index2);
            var size:Number=0;
            var color16:Number=0x000000;
            drawing.drawLine(x1,y1,x2,y2,size,color16);
        }
    }
}
ただ、このDataStorageを用いる際の注意点として、ノードの追加・削除を行うと、エッジに登録してあるindexが変わるので、そのようなGraphの表示には使用できないということがあります。



BACKTOPNEXT




All Contents Copyright (C) 2005 HOSHI Tetsuya
Home