Les Allergies
Alimentaires
Posez votre question Signaler

Une zone dessinable de type paint en ligne

Pierre - Dernière réponse le 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 !
Lire la suite 

Une zone dessinable de type paint en ligne »

8 réponses
Réponse
+0
moins plus
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);
      }
    }
  }
}
Ajouter un commentaire
Réponse
+0
moins plus
Tu dois pouvoir faire ça avec <canvas> en HTML5, un peu de JavaScript, et du Node.js côté serveur.
Ajouter un commentaire
Réponse
+0
moins plus
Salut

Si je me rapelle bien, la balise HTML5 caneva permet ce genre de truc.
Ajouter un commentaire
Réponse
+0
moins plus
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 !
Ajouter un commentaire
Réponse
+0
moins plus
Pierre - 18 févr. 2012 à 12:12
Merci beaucoup, c'est exactement ce que je cherchais !
Pierrecastor- 18 févr. 2012 à 12:14
Je n'ai fait qu'une simple recherche avec html5 + paint
Pierre - 18 févr. 2012 à 14:17
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 !
Ajouter un commentaire
Ce document intitulé « Une zone dessinable de type paint en ligne » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Dossier à la une
Passage au tout numérique : quel coût pour les particuliers ?