Une zone dessinable de type paint en ligne

Pierre -  
 Pierre -
Bonjour,

J'ai pour projet, pour m'entrainer au HTML/Css, javascript/php de faire un petit site sur lequel le visiteur pourrait dessiner dans une une zone spéciale ( en mode paint en gros ) Et le dessin pourrait ensuite etre envoyé.
J'ai vraiment cherché comment on pouvait faire ca mais je n'ai rien trouvé, faut-il utiliser dud php ? Javascript ?

EN gros ce que je veux c'est du type le systeme mis en place sur Chatroulette, qui permet de dessiner comme sur paint et envoyer à l'autre son dessin. Je trouve ca marrant (non ? :) )

Si quelqun a des informations sur comment faire ceci :) j'vous remercie !

5 réponses

  1. forgotten
     
    En Java il existe ceci

    /*
     */
    
    import java.awt.event.*;
    import java.awt.*;
    import java.applet.*;
    
    import java.util.Vector;
    
    public class DrawTest extends Applet{
        DrawPanel panel;
        DrawControls controls;
    
        public void init() {
            setLayout(new BorderLayout());
            panel = new DrawPanel();
            controls = new DrawControls(panel);
            add("Center", panel);
            add("South",controls);
        }
    
        public void destroy() {
            remove(panel);
            remove(controls);
        }
    
        public static void main(String args[]) {
            Frame f = new Frame("DrawTest");
            DrawTest drawTest = new DrawTest();
            drawTest.init();
            drawTest.start();
    
            f.add("Center", drawTest);
            f.setSize(300, 300);
            f.show();
        }
        public String getAppletInfo() {
            return "A simple drawing program.";
        }
    }
    
    class DrawPanel extends Panel implements MouseListener, MouseMotionListener {
        public static final int LINES = 0;
        public static final int POINTS = 1;
        int    mode = LINES;
        Vector lines = new Vector();
        Vector colors = new Vector();
        int x1,y1;
        int x2,y2;
    
        public DrawPanel() {
            setBackground(Color.white);
            addMouseMotionListener(this);
            addMouseListener(this);
        }
    
        public void setDrawMode(int mode) {
            switch (mode) {
              case LINES:
              case POINTS:
                this.mode = mode;
                break;
              default:
                throw new IllegalArgumentException();
            }
        }
    
    
        public void mouseDragged(MouseEvent e) {
            e.consume();
            switch (mode) {
                case LINES:
                    x2 = e.getX();
                    y2 = e.getY();
                    break;
                case POINTS:
                default:
                    colors.addElement(getForeground());
                    lines.addElement(new Rectangle(x1, y1, e.getX(), e.getY()));
                    x1 = e.getX();
                    y1 = e.getY();
                    break;
            }
            repaint();
        }
    
        public void mouseMoved(MouseEvent e) {
        }
    
        public void mousePressed(MouseEvent e) {
            e.consume();
            switch (mode) {
                case LINES:
                    x1 = e.getX();
                    y1 = e.getY();
                    x2 = -1;
                    break;
                case POINTS:
                default:
                    colors.addElement(getForeground());
                    lines.addElement(new Rectangle(e.getX(), e.getY(), -1, -1));
                    x1 = e.getX();
                    y1 = e.getY();
                    repaint();
                    break;
            }
        }
    
        public void mouseReleased(MouseEvent e) {
            e.consume();
            switch (mode) {
                case LINES:
                    colors.addElement(getForeground());
                    lines.addElement(new Rectangle(x1, y1, e.getX(), e.getY()));
                    x2 = -1;
                    break;
                case POINTS:
                default:
                    break;
            }
            repaint();
        }
    
        public void mouseEntered(MouseEvent e) {
        }
    
        public void mouseExited(MouseEvent e) {
        }
    
        public void mouseClicked(MouseEvent e) {
        }
    
        public void paint(Graphics g) {
            int np = lines.size();
    
            /* draw the current lines */
            g.setColor(getForeground());
            for (int i=0; i < np; i++) {
                Rectangle p = (Rectangle)lines.elementAt(i);
                g.setColor((Color)colors.elementAt(i));
                if (p.width != -1) {
                    g.drawLine(p.x, p.y, p.width, p.height);
                } else {
                    g.drawLine(p.x, p.y, p.x, p.y);
                }
            }
            if (mode == LINES) {
                g.setColor(getForeground());
                if (x2 != -1) {
                    g.drawLine(x1, y1, x2, y2);
                }
            }
        }
    }
    
    
    class DrawControls extends Panel implements ItemListener {
        DrawPanel target;
    
        public DrawControls(DrawPanel target) {
            this.target = target;
            setLayout(new FlowLayout());
            setBackground(Color.lightGray);
            target.setForeground(Color.red);
            CheckboxGroup group = new CheckboxGroup();
            Checkbox b;
            add(b = new Checkbox(null, group, false));
            b.addItemListener(this);
            b.setForeground(Color.red);
            add(b = new Checkbox(null, group, false));
            b.addItemListener(this);
            b.setForeground(Color.green);
            add(b = new Checkbox(null, group, false));
            b.addItemListener(this);
            b.setForeground(Color.blue);
            add(b = new Checkbox(null, group, false));
            b.addItemListener(this);
            b.setForeground(Color.pink);
            add(b = new Checkbox(null, group, false));
            b.addItemListener(this);
            b.setForeground(Color.orange);
            add(b = new Checkbox(null, group, true));
            b.addItemListener(this);
            b.setForeground(Color.black);
            target.setForeground(b.getForeground());
            Choice shapes = new Choice();
            shapes.addItemListener(this);
            shapes.addItem("Lines");
            shapes.addItem("Points");
            shapes.setBackground(Color.lightGray);
            add(shapes);
        }
    
        public void paint(Graphics g) {
            Rectangle r = getBounds();
            g.setColor(Color.lightGray);
            g.draw3DRect(0, 0, r.width, r.height, false);
    
            int n = getComponentCount();
            for(int i=0; i<n; i++) {
                Component comp = getComponent(i);
                if (comp instanceof Checkbox) {
                    Point loc = comp.getLocation();
                    Dimension d = comp.getSize();
                    g.setColor(comp.getForeground());
                    g.drawRect(loc.x-1, loc.y-1, d.width+1, d.height+1);
                }
            }
        }
    
      public void itemStateChanged(ItemEvent e) {
        if (e.getSource() instanceof Checkbox) {
          target.setForeground(((Component)e.getSource()).getForeground());
        } else if (e.getSource() instanceof Choice) {
          String choice = (String) e.getItem();
          if (choice.equals("Lines")) {
            target.setDrawMode(DrawPanel.LINES);
          } else if (choice.equals("Points")) {
            target.setDrawMode(DrawPanel.POINTS);
          }
        }
      }
    }
    0
  2. KX Messages postés 19031 Statut Modérateur 3 020
     
    Tu dois pouvoir faire ça avec <canvas> en HTML5, un peu de JavaScript, et du Node.js côté serveur.
    0
  3. Pierrecastor Messages postés 10830 Date d'inscription   Statut Modérateur Dernière intervention   4 215
     
    Salut

    Si je me rapelle bien, la balise HTML5 caneva permet ce genre de truc.
    0
  4. Pierre
     
    Merci pour ces réponses, je débute plus ou moins la programmation, alors je vais essayer d'etudier ton bout de code, et me renseigner au niveau du HTML5 ! Merci à vous !
    0
  5. Vous n’avez pas trouvé la réponse que vous recherchez ?

    Posez votre question
  6. Pierrecastor Messages postés 10830 Date d'inscription   Statut Modérateur Dernière intervention   4 215
     
    0
    1. Pierre
       
      Merci beaucoup, c'est exactement ce que je cherchais !
      0
    2. Pierrecastor Messages postés 10830 Date d'inscription   Statut Modérateur Dernière intervention   4 215
       
      Je n'ai fait qu'une simple recherche avec html5 + paint
      0
    3. Pierre
       
      J'ai pas trop trouvé, je trouvais plutot des trucs sur paint.net et aussi j'ai plutot cherché "zone dessinable" En tout cas, merci !
      0