Discussion :

[vinvevbe]

Bonjour,

Actuellement, je travaille sur un projet dont l'idée est de faire bouger des formes en SVG sur une image.
Pour cela, j'utilise la bibliothèque batik.

Avec elle, je crée des noeuds du type Element et je leur donne une forme particulière (rectangle ou cercle)

ex pour le cercle, je passe par
une classe figure

// w3c Libraries used (with Batik 1.7)
import org.w3c.dom.Document;
import org.w3c.dom.Element;

public class Figure
{
// Variables used
public Element figure;
public String type;

public Figure(Document document,String type,Element root, String svgNS)
{
this.type = type;

figure = document.createElementNS (svgNS, type); // to Draw the shape indicated (to see http://www.w3.org/TR/SVG/expanded-toc.html)
figure.setAttributeNS (null, "fill", "lightgray"); //and the look
figure.setAttributeNS (null, "stroke", "darkslateblue");
figure.setAttributeNS (null, "stroke-width", "1");
figure.setAttributeNS (null, "opacity", "0.5");

}
}

et une cercle

// w3c Libraries used (with Batik 1.7)
import org.w3c.dom.Document;
import org.w3c.dom.Element;

public class FigureCercle extends Figure
{
// Constructor
public FigureCercle(Document document,Element root, String svg,int compt)
{
super(document,"circle",root, svg);
this.figure.setAttributeNS (null, "r", "70"); //Dimensions
this.figure.setAttributeNS (null, "cx", "70"); // and location
this.figure.setAttributeNS (null, "cy","70");
this.figure.setAttributeNS (null, "id", this.type+compt); // Single Id for a circle
// And finally, the new element is appended to the
// root
root.appendChild (figure);
}
}

je les affiches sur un canvas adapté pour l'affichage svg
voici pour le canvas,

// Batik Libraries used
import org.apache.batik.dom.svg.SVGDOMImplementation;
import org.apache.batik.script.Window;
import org.apache.batik.swing.JSVGCanvas;

// w3c Libraries used (with Batik 1.7)
import org.w3c.dom.DOMImplementation;
import org.w3c.dom.Document;
import org.w3c.dom.Element;

public class Canvas extends JSVGCanvas implements MouseListener
{
// Variables used
public Document document;
public Element root;
public Window window;

//Array of list for the modes
public String[][] Mode = {{"Mode_Call", "Mode_Configuration", "Mode_Delete", "Mode_Rotation", "Mode_Translation"}, {"false", "false", "false", "false", "true"}}; // Array to determinate the mode

//Constructor
public Canvas(String svgNS)
{
super();
this.addMouseListener(this); // For the position of the mouse's cursor
this.setDocumentState (JSVGCanvas.ALWAYS_DYNAMIC); //canvas always dynamique

this.setBounds (500, 500, this.getWidth (), this.getHeight ());
this.setBorder (BorderFactory.createLineBorder (Color.black,4)); // Borders of Canvas

DOMImplementation dom = SVGDOMImplementation.getDOMImplementation ();// Create the document and attach it to the canvas
document = dom.createDocument (svgNS, "svg", null);
this.setDocument (document);

root = this.document.getDocumentElement ();
}

et l'affichage

/*
* Components and the actions related
*/

package h52;

// Libraries used
import java.awt.AlphaComposite;
import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Graphics;
import java.awt.GridLayout;
import java.awt.Image;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.event.InputEvent;
import java.awt.event.KeyEvent;
import java.io.File;
import java.io.IOException;

import javax.swing.JButton;
import javax.swing.JFileChooser;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JMenu;
import javax.swing.JMenuBar;
import javax.swing.JMenuItem;
import javax.swing.JOptionPane;
import javax.swing.JPanel;

//Batik Libraries used
import javax.swing.KeyStroke;
import org.apache.batik.dom.svg.SVGDOMImplementation;
import org.apache.batik.script.Window;
import org.apache.batik.swing.svg.SVGLoadEventDispatcherAdapter;
import org.apache.batik.swing.svg.SVGLoadEventDispatcherEvent;

//w3c Libraries used (with Batik 1.7)
import org.w3c.dom.Element;

public class ComponentsMenu extends JFrame implements ActionListener
{
// Variables used
public final String svgNS = SVGDOMImplementation.SVG_NAMESPACE_URI;// The SVG namespace string to be used throughout the application

public Canvas canvas, canvasArr;
public JButton btnCercle,btnRec;
public JLabel jLMode;
public JMenu MMode, MFile, MTest;
public JMenuBar MBBar;
public JMenuItem MIRotation, MITranslation, MIExit, MISave, MIDelete, MITest, MIConfiguration, MIOpen;
public JPanel panel, panelBouton, panelEmpty;
public JLabel imArr;
public ImagePanel canvasPanel;
public Window window;

public Element root, elt;// Get a reference to the <svg> element

public FigureCercle figCercle;
public FigureRectangle figRect;
public RegisterListenerCircle registreCircle;
public RegisterListenerRect registreRect;
public int comptCercle=0,comptRect=0;

public String test;

private JFileChooser ficheSave = new JFileChooser(); // To save
private JFileChooser ficheOpen = new JFileChooser(); // To load

// Constructor
public ComponentsMenu ()
{

super ("Interface SEE-Batik"); // Frame construction

this.setDefaultCloseOperation (JFrame.EXIT_ON_CLOSE);

canvas = new Canvas(svgNS); //Canvas construction

canvas.addSVGLoadEventDispatcherListener (new SVGLoadEventDispatcherAdapter ()// Obtain the Window reference when it becomes available
{
public void svgLoadEventDispatchStarted (SVGLoadEventDispatcherEvent e)
{
window = canvas.getUpdateManager ().getScriptingEnvironment ().createWindow ();
canvas.window = window;
}
});


btnCercle = new JButton("Cercle");// Buttons construction
btnRec = new JButton("Rectangle");
btnCercle.addActionListener(this);
btnRec.addActionListener(this);

jLMode = new JLabel("Translation"); // a label to indicate the mode of program

MBBar = new JMenuBar(); // A menubar for the differents components

MFile = new JMenu("File");
MMode = new JMenu("Mode");
MTest = new JMenu("Test");

MISave = new JMenuItem("Save");
MIConfiguration = new JMenuItem("Configuration");
MIDelete = new JMenuItem("Delete");
MIRotation = new JMenuItem("Rotation");
MITranslation = new JMenuItem("Translation");
MITest = new JMenuItem("Test");
MIExit = new JMenuItem("Exit");
MIOpen = new JMenuItem("Open");

setJMenuBar(MBBar);
MBBar.add(MFile);
MBBar.add(MMode);
MBBar.add(MTest);

MFile.add(MIExit);
MFile.add(MISave);
MFile.add(MIOpen);
MMode.add(MIConfiguration);
MMode.add(MIDelete);
MMode.add(MIRotation);
MMode.add(MITranslation);
MTest.add(MITest);

MIExit.addActionListener(this);
MISave.addActionListener(this);
MIOpen.addActionListener(this);
MIConfiguration.addActionListener(this);
MIRotation.addActionListener(this);
MIDelete.addActionListener(this);
MITest.addActionListener(this);
MITranslation.addActionListener(this);

// Mnémonique shortcuts
MFile.setMnemonic('F');
MMode.setMnemonic('M');
MTest.setMnemonic('T');
MIExit.setMnemonic('E');
MIExit.setAccelerator(KeyStroke.getKeyStroke(KeyEvent.VK_E, InputEvent.CTRL_MASK));
MISave.setMnemonic('S');
MISave.setAccelerator(KeyStroke.getKeyStroke(KeyEvent.VK_S, InputEvent.CTRL_MASK));
MIConfiguration.setMnemonic('C');
MIConfiguration.setAccelerator(KeyStroke.getKeyStroke(KeyEvent.VK_C, InputEvent.CTRL_MASK));
MIRotation.setMnemonic('R');
MIRotation.setAccelerator(KeyStroke.getKeyStroke(KeyEvent.VK_R, InputEvent.CTRL_MASK));
MITranslation.setMnemonic('L');
MITranslation.setAccelerator(KeyStroke.getKeyStroke(KeyEvent.VK_L, InputEvent.CTRL_MASK));
MIDelete.setMnemonic('D');
MIDelete.setAccelerator(KeyStroke.getKeyStroke(KeyEvent.VK_D, InputEvent.CTRL_MASK));
MITest.setMnemonic('T');
MITest.setAccelerator(KeyStroke.getKeyStroke(KeyEvent.VK_T, InputEvent.ALT_MASK));

panelEmpty = new JPanel();
panelBouton = new JPanel();
panelBouton.setLayout(new GridLayout(4,1));
panelBouton.add("1", jLMode);// Panel of buttons
panelBouton.add("2", panelEmpty);
panelBouton.add("3", btnRec);
panelBouton.add("4", btnCercle);

panel = new JPanel();// Panels construction
panel.setLayout(new BorderLayout());
canvasPanel = new ImagePanel();
canvasPanel.setLayout(new BorderLayout());

canvasPanel.add("Center", canvas);

panel.add ("Center",canvasPanel);// Main Panel
panel.add("West",panelBouton);




root = canvas.document.getDocumentElement (); // Get a reference to the <svg> element

this.setContentPane (panel);
this.pack();
this.setDefaultLookAndFeelDecorated(true); // Window Full Screen
this.setExtendedState(this.MAXIMIZED_BOTH);
}

// Actions of buttons
public void actionPerformed(ActionEvent ae)
{
Object source = ae.getSource();

/*
* Button used to create a Circle Element
*/
if(source==btnCercle)
{
javax.swing.JOptionPane.showMessageDialog(null, canvas.getURI());
comptCercle++; // Used to formate an unique Id for each Circle
figCercle = new FigureCercle(canvas.document, root, svgNS, comptCercle);//(70, 70) are coordinates of the center's circle
registreCircle = new RegisterListenerCircle(canvas, window, root, "circle", canvas.document, svgNS);

int i;
for(i = 0; i < root.getChildNodes().getLength(); i++)
{
elt = (Element)(root.getChildNodes().item(i));
}

for (i = 0; i < 5; i++) // To select the mode
{
canvas.Mode[1][i] = "false";
if(canvas.Mode[0][i] == "Mode_Translation")
{
canvas.Mode[1][i] = "true";
}
}
jLMode.setText("Translation"); // The mode is indicated on a label
}

/*
* Button used to create a Square Element
*/
if(source==btnRec)
{
comptRect++;// Used to formate an unique Id for each Square
figRect = new FigureRectangle(canvas.document, root, svgNS,comptRect);
registreRect = new RegisterListenerRect(canvas, window, root, "polygon", canvas.document, svgNS);
int i;
for(i = 0; i < root.getChildNodes().getLength(); i++)
{
elt = (Element)(root.getChildNodes().item(i));
}
for (i = 0; i < 5; i++) // To select the mode
{
canvas.Mode[1][i] = "false";
if(canvas.Mode[0][i] == "Mode_Translation")
{
canvas.Mode[1][i] = "true";
}
}
jLMode.setText("Translation"); // The mode is indicated on a label
}

/*
* exit
*/
if(source == MIExit) // Exit the application
{
System.exit(1);
}

if(source == MIOpen) // Exit the application
{

javax.swing.JOptionPane.showMessageDialog(null, SVGDOMImplementation.SVG_NAMESPACE_URI);
int returnVal = ficheOpen.showOpenDialog(this);
try
{
if (returnVal == JFileChooser.APPROVE_OPTION)
{
File fil = ficheOpen.getSelectedFile();
canvasArr.setURI(fil.toURL().toString());
}
}
catch(IOException ioe)
{
System.err.print(ioe.toString());
}
}

/*
* Configuration
*/
if(source == MIConfiguration)
{
if (root.getChildNodes().getLength()!=0)
{
int i;
for(i = 0; i < root.getChildNodes().getLength(); i++)
{
elt = (Element)(root.getChildNodes().item(i)); //For each Node, the good mode is activated
}
for (i = 0; i < 5; i++) // To select the mode
{
canvas.Mode[1][i] = "false";
if(canvas.Mode[0][i] == "Mode_Configuration")
{
canvas.Mode[1][i] = "true";
}
}
jLMode.setText("Configuration"); // The mode is indicated on a label
}
}

/*
* Rotation
*/
if(source == MIRotation)
{
if (root.getChildNodes().getLength()!=0)
{
int i;
for(i = 0; i < root.getChildNodes().getLength(); i++)
{
elt = (Element)(root.getChildNodes().item(i)); //For each Node, the good mode is activated
}
for (i = 0; i < 5; i++) // To select the mode
{
canvas.Mode[1][i] = "false";
if(canvas.Mode[0][i] == "Mode_Rotation")
{
canvas.Mode[1][i] = "true";
}
}
jLMode.setText("Rotation"); // The mode is indicated on a label
}
}

/*
* Translation
*/
if(source == MITranslation)
{
if (root.getChildNodes().getLength()!=0 )
{
int i;
for(i = 0; i < root.getChildNodes().getLength(); i++)
{
elt = (Element)(root.getChildNodes().item(i)); //For each Node, the good mode is activated
}
for (i = 0; i < 5; i++) // To select the mode
{
canvas.Mode[1][i] = "false";
if(canvas.Mode[0][i] == "Mode_Translation")
{
canvas.Mode[1][i] = "true";
}
}
jLMode.setText("Translation"); // The mode is indicated on a label
}
}

/*
* To delete the figure
*/
if(source == MIDelete)
{
if (root.getChildNodes().getLength()!=0)
{
int i;
for(i = 0; i < root.getChildNodes().getLength(); i++)
{
elt = (Element)(root.getChildNodes().item(i)); //For each Node, the good mode is activated
}
for (i = 0; i < 5; i++) // To select the mode
{
canvas.Mode[1][i] = "false";
if(canvas.Mode[0][i] == "Mode_Delete")
{
canvas.Mode[1][i] = "true";
}
}
jLMode.setText("Delete"); // The mode is indicated on a label
}
}

/*
* To save the file
*/
if(source == MISave)
{
int returnVal = ficheSave.showSaveDialog(this);
if (returnVal == JFileChooser.APPROVE_OPTION)
{
File file = ficheSave.getSelectedFile();
SaveFile svFile = new SaveFile(canvas);
svFile.saveToFile(file.getPath());
}
}

if(source == MITest)
{
String mes = (String) JOptionPane.showInputDialog("Alert ou Stop ?");
jLMode.setText("Translation"); // The mode is indicated on a label

// If an alert
if (mes.contentEquals("Alert"))
{
test = (String) JOptionPane.showInputDialog("Entrez le matricule du tunnel"); // for the tunnel indicated

for (int i = 0; i < root.getChildNodes().getLength(); i++)
{
elt = (Element)(root.getChildNodes().item(i));
if(elt.getAttribute("name").toString().contentEquals(test))
{
elt.setAttribute("alert", "true");
window.setInterval(new Alert(elt),50);
}
}
int i;
for (i = 0; i < 5; i++) // To select the mode
{
canvas.Mode[1][i] = "false";
}
}
else if (mes.contentEquals("Stop"))
{
test = (String) JOptionPane.showInputDialog("Entrez le matricule du tunnel");
for (int i = 0; i < root.getChildNodes().getLength(); i++)
{
elt = (Element)(root.getChildNodes().item(i));
if(elt.getAttribute("name").toString().contentEquals(test))
{
elt.setAttribute("alert", "false");
}
}
int i;
for (i = 0; i < 5; i++) // To select the mode
{
canvas.Mode[1][i] = "false";
if(canvas.Mode[0][i] == "Mode_Translation")
{
canvas.Mode[1][i] = "true";
}
}
}
}
}
}

Mon problème est que lorsque je demande d'afficher une image en svg, cela fonctionne, mais je ne peux plus alors tracer mes figures cercle et rectangle dessus et inversement.

J'ai tenté de réalisé deux canvas, un pour les formes et un pour l'image et de rendre celui des formes transparent, mais cela ne fonctionne pas.

[polymorphisme]

Bonjour,

dans le cas où ton idée est simplement de "faire bouger des formes en SVG sur une image.", tu peux utiliser SVG (avec une image de fond) + javascript pour animer tes objets.