wie einfache Grafiken zu malen, wenn ich meine Maus auf einem div wie Photoshop ziehen Raphael mit

Question

dies ist mein Code:

<div id="handle" style="background:#5f3"> 

</div> 

und das Skript ist:

var set = Raphael(["handle", 400, 400, { 
    type: "rect", 
    x: 300, 
    y: 10, 
    width: 25, 
    height: 25, 
    stroke: "blue" 
}, { 
    type: "text", 
    x: 30, 
    y: 40, 
    text: "Dump" 
}]); 

die Demo hier: http://jsfiddle.net/ATZNW/

so wie einfache Grafiken zu zeichnen (ex: rect) wie photoshop,

dank

Answer 1

Raphael ist eine Bibliothek für Vector Graphics, was Sie tun möchten, ist Raster Graphics.

Das HTML <canvas> Element ist genau das, was Sie in diesem Fall benötigen.

<canvas id="bg" width="640" height="480"></canvas> 

einige grundlegende JavaScript:

var bg = document.getElementById('bg').getContext('2d'); // retrieve the 2d context to draw on 
bg.fillStyle = '#ff0000'; // set the fill color to red 

// draw a filled rectangle at 20/20 thats 200x100 pixel in size 
bg.fillRect(20, 20, 200, 100); 

Weitere Informationen zum Thema Check Mozilla's Canvas Tutorial aus.