Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Use Bezier curves to smooth out edges on feather tool

  • Loading branch information...
commit 635511f9f5f7bc9515a65181990456976a5a5db3 1 parent 9465654
@tadast authored
Showing with 32 additions and 20 deletions.
  1. +19 −10 scripts/objects/draw_tools.coffee
  2. +13 −10 scripts/objects/draw_tools.js
View
29 scripts/objects/draw_tools.coffee
@@ -18,7 +18,7 @@ class DrawTool
@toolName = 'GenericDrawTool'
@respondsTo: (name) ->
@toolName == name
-
+
constructor: (@canvas, @ctx) ->
@drawRadius = 10
@@ -31,7 +31,7 @@ class DrawTool
# Dot tool draws bubbles on every event
class DotTool extends DrawTool
@toolName = 'dot'
-
+
start: (e) ->
for touch in e.touches
@draw touch.clientX, touch.clientY
@@ -53,7 +53,7 @@ class DotTool extends DrawTool
# Currently doesn't work as expected with multitouch
class FingerTool extends DrawTool
@toolName = 'finger'
-
+
init: ->
@touchlog ||= new TouchLog
@ctx.setLineJoin('round')
@@ -88,17 +88,26 @@ class FeatherTool extends DrawTool
@touchlog.logEvent e
move: (e) ->
- @touchlog.logEvent e
for touch in e.changedTouches
log = @touchlog.forTouch(touch)
- distance = log.distance()
- previous = log.previous
+ continue unless log && log.previous
+
+ @ctx.lineWidth = @drawRadius
@ctx.beginPath()
- @ctx.lineWidth = distance / 40.0 * @drawRadius
- @ctx.moveTo previous.x, previous.y
- @ctx.lineTo touch.clientX, touch.clientY
- @ctx.stroke();
+
+ # move to midpoint between last and prev points so that bezier curves don't intersect
+ startX = (log.previous.x + log.current.x) / 2
+ startY = (log.previous.y + log.current.y) / 2
+ @ctx.moveTo startX, startY
+
+ # do the same with the end point
+ endX = (log.current.x + touch.clientX) / 2
+ endY = (log.current.y + touch.clientY) / 2
+ @ctx.quadraticCurveTo(log.current.x, log.current.y, endX, endY)
+
+ @ctx.stroke()
@ctx.closePath()
+ @touchlog.logEvent e
end: (e) ->
true
View
23 scripts/objects/draw_tools.js
@@ -130,23 +130,26 @@ FeatherTool = (function() {
return this.touchlog.logEvent(e);
};
FeatherTool.prototype.move = function(e) {
- var distance, log, previous, touch, _i, _len, _ref, _results;
- this.touchlog.logEvent(e);
+ var endX, endY, log, startX, startY, touch, _i, _len, _ref;
_ref = e.changedTouches;
- _results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
touch = _ref[_i];
log = this.touchlog.forTouch(touch);
- distance = log.distance();
- previous = log.previous;
+ if (!(log && log.previous)) {
+ continue;
+ }
+ this.ctx.lineWidth = this.drawRadius;
this.ctx.beginPath();
- this.ctx.lineWidth = distance / 40.0 * this.drawRadius;
- this.ctx.moveTo(previous.x, previous.y);
- this.ctx.lineTo(touch.clientX, touch.clientY);
+ startX = (log.previous.x + log.current.x) / 2;
+ startY = (log.previous.y + log.current.y) / 2;
+ this.ctx.moveTo(startX, startY);
+ endX = (log.current.x + touch.clientX) / 2;
+ endY = (log.current.y + touch.clientY) / 2;
+ this.ctx.quadraticCurveTo(log.current.x, log.current.y, endX, endY);
this.ctx.stroke();
- _results.push(this.ctx.closePath());
+ this.ctx.closePath();
}
- return _results;
+ return this.touchlog.logEvent(e);
};
FeatherTool.prototype.end = function(e) {
return true;
Please sign in to comment.
Something went wrong with that request. Please try again.