java - Piccolo ズーム可能なインターフェイス、ズーム時にテキストを変更する方法

Question

ズーム可能なインターフェイスを作成するために、いくつかの Piccolo を試しています。

キャンバス上に PText を含む四角形を作成しています。ズームするときに、テキストを別のものに変更したいと思います。

初期化でこれを行いました：

//
        //specify the current Piccolo PCanvas
        //
        m_canvas = getCanvas();
        m_canvas.removeInputEventListener(m_canvas.getPanEventHandler());
        //m_canvas.addInputEventListener(new ClickAndDragHandler(m_canvas));

        //
        //add nodes to the collection -> adding to the collection = adding to the canvas
        //
        m_nodecollection = new NodeCollection(m_canvas);

        RectangleNode node_links = new RectangleNode();
        node_links.setBounds(10, 10, 500, 500);
        m_nodecollection.addNode(node_links);

        RectangleNode node_rechts = new RectangleNode();
        node_rechts.setBounds(600,10,500,500);
        m_nodecollection.addNode(node_rechts);

        PImage node_arrowLeft = new PImage("left.gif");
        node_arrowLeft.setBounds(600, 550, node_arrowLeft.getWidth(), node_arrowLeft.getHeight());
        m_nodecollection.addNode(node_arrowLeft);

        PImage node_arrowRight = new PImage("right.gif");
        node_arrowRight.setBounds(680, 550, node_arrowRight.getWidth(), node_arrowRight.getHeight());
        m_nodecollection.addNode(node_arrowRight);

        m_nodecollection.connectNodesWithLine(node_rechts, node_arrowRight, true);
        m_nodecollection.connectNodesWithLine(node_rechts, node_arrowLeft, true);


        PText node_text = new PText("Zoomlevel Not Supported");
        node_text.setBounds(180,150, node_text.getWidth(), node_text.getHeight());
        m_nodecollection.connectNodesWithLine(node_links, node_text, true);
        m_nodecollection.addNode(node_text);
        node_links.addChild(node_text);
        node_links.setCollection(m_nodecollection);

nodecollection 全体と PText を membervar として独自の矩形クラスを作成しました。

public class RectangleNode extends PNode{

    private Rectangle2D m_rectangle;
    private NodeCollection collection;
private PText text;

    public RectangleNode()
    {
        m_rectangle = new Rectangle2D.Double();
    }

    public Rectangle2D getRectangle()
    {
        if(m_rectangle == null)
            m_rectangle = new Rectangle2D.Double();
        return m_rectangle;
    }

    public boolean setBounds(double x, double y, double w, double h)
    {
        if(super.setBounds(x, y, w, h))
        {
            m_rectangle.setFrame(x, y, w, h);
            return true;
        }
        return false;
    }

    public void setCollection(NodeCollection collection)
    {
        this.collection = collection;
    }
        public void setText(PText text)
{
    this.text = text;
}
    public void paint(PPaintContext paintcontext)
    {
        Graphics2D g2 = paintcontext.getGraphics();

        //niet ingezoomd
        if(paintcontext.getScale() <= 0.2)
            g2.setPaint(Color.BLACK);

        //half ingezoomd
        if(paintcontext.getScale() > 0.2 && paintcontext.getScale() < 0.7)
        {

            g2.setPaint(Color.BLACK);

        }

        //volledig ingezoomd
        if(paintcontext.getScale() > 0.7)
        {
            g2.setPaint(Color.RED);
            g2.fill(getRectangle());
            g2.setPaint(Color.BLACK);
            g2.draw(getRectangle());
        }
    }
}

さて、テキストを次のように変更できると思いました: text.setText("Tester"); しかし、たとえばsettextを作成してノードをコレクションに追加すると、現在のテキストの上に大きなエラーが表示されます...

誰か助けてくれませんか？

敬具、

Answer 1

Consider posting the whole example as SSCCE, looks like some parts of the code are missing. It is not clear how you actually execute setText.

It may be easier to compose existing nodes and listen to events fired from camera. Consider the following example that draws a rectangle with some text which gets updated according to a zoom level:

import java.awt.Color;
import java.beans.PropertyChangeEvent;
import java.beans.PropertyChangeListener;

import edu.umd.cs.piccolo.PCamera;
import edu.umd.cs.piccolo.nodes.PPath;
import edu.umd.cs.piccolo.nodes.PText;
import edu.umd.cs.piccolo.util.PPaintContext;
import edu.umd.cs.piccolox.PFrame;

public class TestRectZoom extends PFrame {
    public TestRectZoom() {
        super("TestRectZoom", false, null);
    }

    public void initialize() {
        getCanvas().setInteractingRenderQuality(
                PPaintContext.HIGH_QUALITY_RENDERING);
        getCanvas().setDefaultRenderQuality(
                PPaintContext.HIGH_QUALITY_RENDERING);
        getCanvas().setAnimatingRenderQuality(
                PPaintContext.HIGH_QUALITY_RENDERING);

        final PPath rect = PPath.createRectangle(100, 100, 200, 200);
        rect.setPaint(Color.GREEN);
        getCanvas().getLayer().addChild(rect);

        final PText text = new PText(getZoomLevelString());
        rect.addChild(text);

        text.centerFullBoundsOnPoint(rect.getBounds().getCenterX(), rect
                .getBounds().getCenterY());

        getCanvas().getCamera().addPropertyChangeListener(
                PCamera.PROPERTY_VIEW_TRANSFORM, new PropertyChangeListener() {
                    public void propertyChange(final PropertyChangeEvent evt) {
                        text.setText(getZoomLevelString());

                        if (getCanvas().getCamera().getViewScale() > 0.9) {
                            rect.setPaint(Color.GREEN);
                        } else {
                            rect.setPaint(Color.RED);
                        }
                    }
                });
    }

    private String getZoomLevelString() {
        return "Zoom level:"
                + String.format("%.2f", getCanvas().getCamera().getViewScale());
    }

    public static void main(final String[] args) {
        new TestRectZoom();
    }
}

That's how the result looks like:

Answer 2

Piccolo Patterns ページで利用可能なセマンティック ズームを探しています。パターン 17: セマンティック ズーム

http://www.piccolo2d.org/learn/patterns.html

Answer 3

Aquaが提案したように問題を解決しました。