mirror of
https://github.com/Hopiu/fabric.js.git
synced 2026-03-18 15:00:32 +00:00
150 lines
No EOL
4.6 KiB
HTML
150 lines
No EOL
4.6 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
|
"http://www.w3.org/TR/html4/strict.dtd">
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
|
<title>Free drawing test</title>
|
|
<style type="text/css">
|
|
#c, #d { border: 1px solid #aaa; }
|
|
body { margin: 0; }
|
|
</style>
|
|
<!--[if lt IE 9]>
|
|
<script type="text/javascript" src="../lib/excanvas.js"></script>
|
|
<![endif]-->
|
|
<script src="../dist/all.js" type="text/javascript"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<canvas id="d" width="300" height="300"></canvas>
|
|
|
|
<div id="out"></div>
|
|
|
|
<p>Opacity: <input type="range" id="opacity"></p>
|
|
<p>Diameter: <input type="range" id="diameter"></p>
|
|
<p>Hardness: <input type="range" id="hardness"></p>
|
|
<p>Color: <input value="rgba(255,0,0,0)" id="color"></p>
|
|
|
|
|
|
<script type="text/javascript">
|
|
(function() {
|
|
var canvas = document.getElementById('d'),
|
|
ctx = (function(){
|
|
return canvas.getContext
|
|
? canvas.getContext('2d')
|
|
: typeof G_vmlCanvasManager != 'undefined'
|
|
? G_vmlCanvasManager.initElement(canvas).getContext('2d')
|
|
: null;
|
|
})(),
|
|
path = [ ],
|
|
xPoints = [ ],
|
|
yPoints = [ ],
|
|
width = canvas.width,
|
|
height = canvas.height,
|
|
|
|
opacity = 0.5,
|
|
diameter = 20,
|
|
type = 'brush',
|
|
hardness = 50,
|
|
color = 'rgba(255,0,0,0)';
|
|
|
|
if (!ctx) return;
|
|
|
|
ctx.fillStyle = '#000000';
|
|
|
|
function onMove(e) {
|
|
e = e || window.event;
|
|
var x = e.pageX,
|
|
y = e.pageY,
|
|
spread = type == 'pencil' ? (diameter - 1) : (hardness / 100 * diameter - 1);
|
|
|
|
//ctx.globalCompositeOperation = 'source-over';
|
|
|
|
var r = ctx.createRadialGradient(x, y, spread, x, y, diameter);
|
|
|
|
colorWithOpacity = color.replace(/\d+\)$/, opacity + ')');
|
|
r.addColorStop(0, colorWithOpacity);
|
|
r.addColorStop(0.95, color); // prevent aggregation of semi-opaque pixels
|
|
r.addColorStop(1, color);
|
|
ctx.fillStyle = r;
|
|
ctx.fillRect(0, 0, width, height);
|
|
|
|
|
|
//ctx.globalCompositeOperation = 'source-in';
|
|
|
|
//ctx.lineTo(x, y);
|
|
//ctx.stroke();
|
|
|
|
xPoints.push(x);
|
|
yPoints.push(y);
|
|
}
|
|
|
|
function reset() {
|
|
xPoints.length = yPoints.length = path.length = 0;
|
|
ctx.clearRect(0, 0, width, height);
|
|
}
|
|
|
|
canvas.onmousedown = function(e) {
|
|
e = e || window.event;
|
|
var x = e.pageX,
|
|
y = e.pageY;
|
|
|
|
reset();
|
|
|
|
ctx.moveTo(x, y);
|
|
|
|
xPoints.push(x);
|
|
yPoints.push(y);
|
|
|
|
canvas.onmousemove = onMove;
|
|
onMove(e);
|
|
};
|
|
|
|
canvas.onmouseup = function(e) {
|
|
e = e || window.event;
|
|
canvas.onmousemove = null;
|
|
|
|
var minX = fabric.util.array.min(xPoints),
|
|
minY = fabric.util.array.min(yPoints);
|
|
|
|
//ctx.fillStyle = 'rgb(255,0,0)';
|
|
//ctx.fillRect(minX, minY, 3, 3);
|
|
|
|
/*
|
|
path.push('M ', xPoints[0] - minX, ' ', yPoints[0] - minY, ' ');
|
|
|
|
for (var i = 1; xPoint = xPoints[i], yPoint = yPoints[i]; i++) {
|
|
path.push('L ', xPoint - minX, ' ', yPoint - minY, ' ');
|
|
}
|
|
|
|
document.getElementById('out').innerHTML = ('var p = new fabric.Path("' + path.join('') + '"); ' +
|
|
'p.fill = null; p.options.stroke = "rgb(0,0,0)"; __canvas.add(p); p.set("left", '+
|
|
'__canvas.getCenter().left).set("top", __canvas.getCenter().top).setCoords(); __canvas.renderAll();');
|
|
*/
|
|
};
|
|
|
|
function byId(id) {
|
|
return document.getElementById(id);
|
|
}
|
|
|
|
byId('opacity').onchange = function() {
|
|
opacity = this.value / 100;
|
|
};
|
|
byId('opacity').value = 100 * opacity;
|
|
|
|
byId('diameter').onchange = function() {
|
|
diameter = this.value;
|
|
};
|
|
byId('diameter').value = diameter;
|
|
|
|
byId('hardness').onchange = function() {
|
|
hardness = this.value;
|
|
};
|
|
byId('hardness').value = hardness;
|
|
|
|
byId('color').onchange = function() {
|
|
color = this.value;
|
|
};
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html> |