Hopiu/fabric.js
1
0
Fork 0
mirror of https://github.com/Hopiu/fabric.js.git synced 2026-04-09 08:50:59 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add circle brush

Browse source
This commit is contained in:
kangax 2013-01-11 19:38:22 +01:00
parent 7be14a6a70
commit d6307d1aeb
5 changed files with 278 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
build.js
View file

@ -114,6 +114,7 @@ var filesToInclude = [
'src/static_canvas.class.js',
ifSpecifiedInclude('freedrawing', 'src/pencil_brush.class.js'),
ifSpecifiedInclude('freedrawing', 'src/circle_brush.class.js'),
ifSpecifiedInclude('interaction', 'src/canvas.class.js'),

137
dist/all.js vendored
View file

@ -6889,6 +6889,143 @@ fabric.util.string = {
}
});
})();
/**
* CircleBrush class
* @class fabric.CircleBrush
*/
fabric.CircleBrush = fabric.util.createClass( /** @scope fabric.CircleBrush.prototype */ {
/**
* Color of the brush
* @property
* @type String
*/
color: 'rgb(0, 0, 0)',
/**
* Width of a brush
* @property
* @type Number
*/
width: 10,
/**
* Shadow blur of a pencil
* @property
* @type Number
*/
shadowBlur: 0,
/**
* Shadow color of a pencil
* @property
* @type String
*/
shadowColor: '',
/**
* Shadow offset x of a pencil
* @property
* @type Number
*/
shadowOffsetX: 0,
/**
* Shadow offset y of a pencil
* @property
* @type Number
*/
shadowOffsetY: 0,
/**
* Constructor
* @method initialize
* @param {fabric.Canvas} canvas
* @return {fabric.CircleBrush} Instance of a circle brush
*/
initialize: function(canvas) {
this.canvas = canvas;
this.points = [ ];
},
/**
* @method onMouseDown
* @param {Object} pointer
*/
onMouseDown: function() {
this.points.length = 0;
this.canvas.clearContext(this.canvas.contextTop);
var ctx = this.canvas.contextTop;
if (this.shadowBlur) {
ctx.shadowBlur = this.shadowBlur;
ctx.shadowColor = this.shadowColor || this.color;
ctx.shadowOffsetX = this.shadowOffsetX;
ctx.shadowOffsetY = this.shadowOffsetY;
}
},
/**
* @method onMouseMove
* @param {Object} pointer
*/
onMouseMove: function(pointer) {
var point = this.addPoint(pointer);
var ctx = this.canvas.contextTop;
ctx.fillStyle = point.fill;
ctx.beginPath();
ctx.arc(point.x, point.y, point.radius, 0, Math.PI * 2, false);
ctx.closePath();
ctx.fill();
},
/**
* @method onMouseUp
*/
onMouseUp: function() {
var originalRenderOnAddition = this.canvas.renderOnAddition;
this.canvas.renderOnAddition = false;
for (var i = 0, len = this.points.length; i < len; i++) {
var point = this.points[i];
var circle = new fabric.Circle({
radius: point.radius,
left: point.x,
top: point.y,
fill: point.fill
});
this.canvas.add(circle);
}
this.canvas.renderOnAddition = originalRenderOnAddition;
this.canvas.renderAll();
},
/**
* @method addPoint
* @param {Object} pointer
* @return {fabric.Point} Just added pointer point
*/
addPoint: function(pointer) {
var pointerPoint = new fabric.Point(pointer.x, pointer.y);
var circleRadius = fabric.util.getRandomInt(
Math.max(0, this.width - 20), this.width + 20) / 2;
var circleColor = new fabric.Color(this.color)
.setAlpha(fabric.util.getRandomInt(0, 100) / 100)
.toRgba();
pointerPoint.radius = circleRadius;
pointerPoint.fill = circleColor;
this.points.push(pointerPoint);
return pointerPoint;
}
});
(function() {
var extend = fabric.util.object.extend,

6
dist/all.min.js vendored
View file

File diff suppressed because one or more lines are too long

BIN
dist/all.min.js.gz vendored
View file

Binary file not shown.

137
src/circle_brush.class.js Normal file
View file

@ -0,0 +1,137 @@
/**
* CircleBrush class
* @class fabric.CircleBrush
*/
fabric.CircleBrush = fabric.util.createClass( /** @scope fabric.CircleBrush.prototype */ {
/**
* Color of the brush
* @property
* @type String
*/
color: 'rgb(0, 0, 0)',
/**
* Width of a brush
* @property
* @type Number
*/
width: 10,
/**
* Shadow blur of a pencil
* @property
* @type Number
*/
shadowBlur: 0,
/**
* Shadow color of a pencil
* @property
* @type String
*/
shadowColor: '',
/**
* Shadow offset x of a pencil
* @property
* @type Number
*/
shadowOffsetX: 0,
/**
* Shadow offset y of a pencil
* @property
* @type Number
*/
shadowOffsetY: 0,
/**
* Constructor
* @method initialize
* @param {fabric.Canvas} canvas
* @return {fabric.CircleBrush} Instance of a circle brush
*/
initialize: function(canvas) {
this.canvas = canvas;
this.points = [ ];
},
/**
* @method onMouseDown
* @param {Object} pointer
*/
onMouseDown: function() {
this.points.length = 0;
this.canvas.clearContext(this.canvas.contextTop);
var ctx = this.canvas.contextTop;
if (this.shadowBlur) {
ctx.shadowBlur = this.shadowBlur;
ctx.shadowColor = this.shadowColor || this.color;
ctx.shadowOffsetX = this.shadowOffsetX;
ctx.shadowOffsetY = this.shadowOffsetY;
}
},
/**
* @method onMouseMove
* @param {Object} pointer
*/
onMouseMove: function(pointer) {
var point = this.addPoint(pointer);
var ctx = this.canvas.contextTop;
ctx.fillStyle = point.fill;
ctx.beginPath();
ctx.arc(point.x, point.y, point.radius, 0, Math.PI * 2, false);
ctx.closePath();
ctx.fill();
},
/**
* @method onMouseUp
*/
onMouseUp: function() {
var originalRenderOnAddition = this.canvas.renderOnAddition;
this.canvas.renderOnAddition = false;
for (var i = 0, len = this.points.length; i < len; i++) {
var point = this.points[i];
var circle = new fabric.Circle({
radius: point.radius,
left: point.x,
top: point.y,
fill: point.fill
});
this.canvas.add(circle);
}
this.canvas.renderOnAddition = originalRenderOnAddition;
this.canvas.renderAll();
},
/**
* @method addPoint
* @param {Object} pointer
* @return {fabric.Point} Just added pointer point
*/
addPoint: function(pointer) {
var pointerPoint = new fabric.Point(pointer.x, pointer.y);
var circleRadius = fabric.util.getRandomInt(
Math.max(0, this.width - 20), this.width + 20) / 2;
var circleColor = new fabric.Color(this.color)
.setAlpha(fabric.util.getRandomInt(0, 100) / 100)
.toRgba();
pointerPoint.radius = circleRadius;
pointerPoint.fill = circleColor;
this.points.push(pointerPoint);
return pointerPoint;
}
});