Une zone dessinable de type paint en ligne

Fermé
Pierre - Modifié par Pierre le 13/02/2012 à 17:36
 Pierre - 18 févr. 2012 à 14:17
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 !








A voir également:

5 réponses

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
KX Messages postés 16752 Date d'inscription samedi 31 mai 2008 Statut Modérateur Dernière intervention 31 août 2024 3 019
15 févr. 2012 à 13:40
Tu dois pouvoir faire ça avec <canvas> en HTML5, un peu de JavaScript, et du Node.js côté serveur.
0
Pierrecastor Messages postés 41467 Date d'inscription mercredi 5 novembre 2003 Statut Modérateur Dernière intervention 30 mai 2024 4 143
15 févr. 2012 à 13:43
Salut

Si je me rapelle bien, la balise HTML5 caneva permet ce genre de truc.
0
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

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Pierrecastor Messages postés 41467 Date d'inscription mercredi 5 novembre 2003 Statut Modérateur Dernière intervention 30 mai 2024 4 143
17 févr. 2012 à 14:28
0
Merci beaucoup, c'est exactement ce que je cherchais !
0
Pierrecastor Messages postés 41467 Date d'inscription mercredi 5 novembre 2003 Statut Modérateur Dernière intervention 30 mai 2024 4 143
18 févr. 2012 à 12:14
Je n'ai fait qu'une simple recherche avec html5 + paint
0
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