4

RaphaelJS でペイント アプリケーションを開始しています。(マウスで)紙に描かれたすべての要素を追跡する最良の方法は何ですか?

私が考えた最初の方法は、描画されたすべての要素を配列に追加することでしたが、RaphaelJS に「すぐに使える」ソリューションがある場合、これはそれほど効率的ではない可能性があります。

APIを確認しましたが、探していたようなものが見つかりませんでした...運が悪いのでしょうか?

4

3 に答える 3

3

「追跡」という言葉の意味にもよると思います。

を使用して特定の紙のすべての要素をループすることができ、 をPaper.forEach使用して特定の要素を引き出すことができますPaper.getById。

で要素を描画している場合は、この SO スレッドPaper.pathで説明されている方法を使用して、別のデータ構造に格納できる ID を設定します。

于 2013-08-08T16:26:13.370 に答える
1

私は Raphael.js に少し取り組みましたが、私が見つけた最も効率的な方法は、描画ロジックをデータ構造から分離することでした。ここにコードを完全に記述することはできません (長すぎる =( ) が、コード片を使用していくつかのアイデアを提供できます。

// Create Data Structure to keep seperate track of Elements and its attribute (assuming a Drawing Panel and only Line Type here)

    function DrawingPanelStructure(Type, Attributes){
     this.Type = Type;
     this.Attributes = Attributes;
    }

    function PanelLineAttribute(Color,CurveDataX, CurveDataY)
    {
    this.Color = Color; 
    this.CurveDataX = CurveDataX;   
    this.CurveDataY = CurveDataY;
    }

// Make Global Variables

    _drawingPanelStructure = new Object();
    var ElementDrawnNumber = 0; // Keeping Track of Number of elements drawn

// Then when Drawing the element, populate the Data Structure inside a function as

     _drawingPanelStructure[ElementDrawnNumber] = new DrawingPanelStructure("Line",new PanelLineAttribute("Red",[1,5,6,7,5], [5,1,8,6,8]));
    ElementDrawnNumber = ElementDrawnNumber + 1;

// Then you can call a function to draw the Element at specific index as    
    var XData = [];
    var YData =[];
    XData.push(_drawingPanelStructure[index].Attributes.CurveDataX);
    YData.push(_drawingPanelStructure[index].Attributes.CurveDataY);

     var LineChart = Paper.linechart(0, 0, DrawinPanelWidth, DrawingPanelHeight, 0),
           XData, YData, {}
             );

    // Since in this example there is only 1 line drawn on LineChart I'll use LineChart.lines[0]
     LineChart.lines[0].attr({ "stroke": _drawingPanelStructure[index].Attributes.Color});

また、要素の描画中に一意のIDを指定できるという点でも役立ちます

ElementDrawn.id = "Element_" + ElementDrawnNumber;

そうすれば、Element_3 が _drawingPanelStructure の 3 番目のインデックスにある要素を意味することが確実になります。

したがって、描画ロジックをデータ構造から分離します。つまり、データ構造にデータを入力し、データ構造を何らかの関数に渡し、パネル上のすべての描画を行います。

于 2013-08-08T17:52:46.903 に答える
1

私の経験から、最も効果的なアプローチは、各図面のモデルを配列に保持する特殊なオブジェクト (DataManager と呼びましょう) を作成することです (実際の Rapahel オブジェクトではありません)。

ここにマネージャーのスタブがあります:

function DataManager (){
    var self = this;
    self.DrawingsArray = [];
}

モデルスタブは次のとおりです。

function DrawingModel (name,raphael){
    var self = this;
    self.ID = someObject.generateSomeID();
    self.Name = name;
    self.Rapahel = raphael;
}

これを念頭に置いてモデルを作成し、図面をワークスペースに追加した後、それに raphael オブジェクトの参照を追加し、名前または ID を付けてから、DataManager の DrawingArray に追加します。id に関しては、Raphael オブジェクトに新しいプロパティとして追加することもできるため、イベント ハンドラーでモデルに簡単にアクセスできます。

主な利点は次のとおりです。

  1. あらゆる要素に簡単にアクセスできます。
  2. アプリケーションの状態を簡単に保存 - モデルのみを保存してロードする必要があります
  3. 拡張可能 - モデルは任意の値を保持できます。
于 2013-08-10T11:35:44.660 に答える