Merge pull request #505 from woodcoder/shadow-blur

Shadow blur

src/CanvasRenderingContext2d.cc

@@ -349,22 +349,68 @@ Context2d::shadow(void (fn)(cairo_t *cr)) {
   cairo_path_t *path = cairo_copy_path_flat(_context);
   cairo_save(_context);
 
-  // Offset
-  cairo_translate(
-      _context
-    , state->shadowOffsetX
-    , state->shadowOffsetY);
+  // shadowOffset is unaffected by current transform
+  cairo_matrix_t path_matrix;
+  cairo_get_matrix(_context, &path_matrix);
+  cairo_identity_matrix(_context);
 
   // Apply shadow
   cairo_push_group(_context);
-  cairo_new_path(_context);
-  cairo_append_path(_context, path);
-  setSourceRGBA(state->shadow);
-  fn(_context);
 
   // No need to invoke blur if shadowBlur is 0
   if (state->shadowBlur) {
-    blur(cairo_get_group_target(_context), state->shadowBlur);
+    // find out extent of path
+    double x1, y1, x2, y2;
+    if (fn == cairo_fill || fn == cairo_fill_preserve) {
+      cairo_fill_extents(_context, &x1, &y1, &x2, &y2);
+    } else {
+      cairo_stroke_extents(_context, &x1, &y1, &x2, &y2);
+    }
+
+    // create new image surface that size + padding for blurring
+    double dx = x2-x1, dy = y2-y1;
+    cairo_user_to_device_distance(_context, &dx, &dy);
+    int pad = state->shadowBlur * 2;
+    cairo_surface_t *surface = cairo_get_group_target(_context);
+    cairo_surface_t *shadow_surface = cairo_surface_create_similar_image(surface,
+      CAIRO_FORMAT_ARGB32,
+      dx + 2 * pad,
+      dy + 2 * pad);
+    cairo_t *shadow_context = cairo_create(shadow_surface);
+
+    // transform path to the right place
+    cairo_translate(shadow_context, pad-x1, pad-y1);
+    cairo_transform(shadow_context, &path_matrix);
+
+    // draw the path and blur
+    cairo_set_line_width(shadow_context, cairo_get_line_width(_context));
+    cairo_new_path(shadow_context);
+    cairo_append_path(shadow_context, path);
+    setSourceRGBA(shadow_context, state->shadow);
+    fn(shadow_context);
+    blur(shadow_surface, state->shadowBlur);
+
+    // paint to original context
+    cairo_set_source_surface(_context, shadow_surface,
+      x1 - pad + state->shadowOffsetX + 1,
+      y1 - pad + state->shadowOffsetY + 1);
+    cairo_paint(_context);
+    cairo_destroy(shadow_context);
+    cairo_surface_destroy(shadow_surface);
+  } else {
+    // Offset first, then apply path's transform
+    cairo_translate(
+        _context
+      , state->shadowOffsetX
+      , state->shadowOffsetY);
+    cairo_transform(_context, &path_matrix);
+
+    // Apply shadow
+    cairo_new_path(_context);
+    cairo_append_path(_context, path);
+    setSourceRGBA(state->shadow);
+
+    fn(_context);
   }
 
   // Paint the shadow
@@ -381,13 +427,22 @@ Context2d::shadow(void (fn)(cairo_t *cr)) {
 }
 
 /*
- * Set source RGBA.
+ * Set source RGBA for the current context
  */
 
 void
 Context2d::setSourceRGBA(rgba_t color) {
+  setSourceRGBA(_context, color);
+}
+
+/*
+ * Set source RGBA
+ */
+
+void
+Context2d::setSourceRGBA(cairo_t *ctx, rgba_t color) {
   cairo_set_source_rgba(
-      _context
+      ctx
     , color.r
     , color.g
     , color.b
@@ -412,12 +467,13 @@ void
 Context2d::blur(cairo_surface_t *surface, int radius) {
   // Steve Hanov, 2009
   // Released into the public domain.
-  --radius;
+  radius = radius * 0.57735f + 0.5f;
   // get width, height
   int width = cairo_image_surface_get_width( surface );
   int height = cairo_image_surface_get_height( surface );
   unsigned* precalc =
       (unsigned*)malloc(width*height*sizeof(unsigned));
+  cairo_surface_flush( surface );
   unsigned char* src = cairo_image_surface_get_data( surface );
   double mul=1.f/((radius*2)*(radius*2));
   int channel;
@@ -465,6 +521,7 @@ Context2d::blur(cairo_surface_t *surface, int radius) {
       }
   }
 
+  cairo_surface_mark_dirty(surface);
   free(precalc);
 }
 
@@ -675,11 +732,6 @@ NAN_METHOD(Context2d::DrawImage) {
   // Start draw
   cairo_save(ctx);
 
-  context->savePath();
-  cairo_rectangle(ctx, dx, dy, dw, dh);
-  cairo_clip(ctx);
-  context->restorePath();
-
   // Scale src
   if (dw != sw || dh != sh) {
     float fx = (float) dw / sw;
@@ -689,6 +741,18 @@ NAN_METHOD(Context2d::DrawImage) {
     dy /= fy;
   }
 
+  if (context->hasShadow()) {
+    context->setSourceRGBA(context->state->shadow);
+    cairo_mask_surface(ctx, surface,
+      dx - sx + context->state->shadowOffsetX,
+      dy - sy + context->state->shadowOffsetY);
+  }
+
+  context->savePath();
+  cairo_rectangle(ctx, dx, dy, dw, dh);
+  cairo_clip(ctx);
+  context->restorePath();
+
   // Paint
   cairo_set_source_surface(ctx, surface, dx - sx, dy - sy);
   cairo_pattern_set_filter(cairo_get_source(ctx), context->state->patternQuality);

src/CanvasRenderingContext2d.h

@@ -150,6 +150,7 @@ class Context2d: public node::ObjectWrap {
     inline Canvas *canvas(){ return _canvas; }
     inline bool hasShadow();
     void inline setSourceRGBA(rgba_t color);
+    void inline setSourceRGBA(cairo_t *ctx, rgba_t color);
     void setTextPath(const char *str, double x, double y);
     void blur(cairo_surface_t *surface, int radius);
     void shadow(void (fn)(cairo_t *cr));

test/public/app.js

@@ -26,6 +26,32 @@ function text(str) {
   return document.createTextNode(str);
 }
 
+function pdfForm(fn, canvas) {
+  var form = create('form')
+    , input = create('input')
+    , submit = create('input');
+
+  form.setAttribute('action', '/pdf');
+  form.setAttribute('method', 'post');
+  form.setAttribute('target', '_blank');
+
+  input.setAttribute('type', 'hidden');
+  input.setAttribute('name', 'json');
+  input.setAttribute('value', JSON.stringify({
+    fn: fn.toString()
+    , width: canvas.width
+    , height: canvas.height
+  }));
+
+  submit.setAttribute('type', 'submit');
+  submit.setAttribute('value', 'PDF');
+
+  form.appendChild(input);
+  form.appendChild(submit);
+
+  return form;
+}
+
 function clearTests() {
   var table = get('tests');
   table.removeChild(table.children[1]);
@@ -47,6 +73,7 @@ function runTests() {
 
     tds[1].appendChild(canvas);
     tds[2].appendChild(create('h3', name));
+    tds[2].appendChild(pdfForm(fn, canvas));
 
     tr.appendChild(tds[0]);
     tr.appendChild(tds[1]);

test/public/tests.js

@@ -1327,6 +1327,38 @@ tests['shadowOffset{X,Y} negative'] = function(ctx){
   ctx.fillRect(150,150,20,20);
 };
 
+tests['shadowOffset{X,Y} transform'] = function(ctx){
+  ctx.translate(100, 0);
+  ctx.scale(.75,.75);
+  ctx.rotate(Math.PI/4);
+
+  ctx.fillRect(150,10,20,20);
+
+  ctx.lineTo(20,5);
+  ctx.lineTo(100,5);
+  ctx.stroke();
+
+  ctx.shadowColor = '#c00';
+  ctx.shadowBlur = 5;
+  ctx.shadowOffsetX = 10;
+  ctx.shadowOffsetY = 10;
+  ctx.fillRect(20,20,100,100);
+
+  ctx.beginPath();
+  ctx.lineTo(20,150);
+  ctx.lineTo(100,150);
+  ctx.stroke();
+
+  ctx.shadowBlur = 0;
+  
+  ctx.beginPath();
+  ctx.lineTo(20,180);
+  ctx.lineTo(100,180);
+  ctx.stroke();
+  
+  ctx.fillRect(150,150,20,20);
+};
+
 tests['shadowBlur values'] = function(ctx){
   ctx.fillRect(150,10,20,20);
 
@@ -1478,6 +1510,33 @@ tests['shadow strokeText()'] = function(ctx){
   ctx.strokeText("Shadow", 100, 100);
 };
 
+tests['shadow transform text'] = function(ctx){
+  ctx.shadowColor = '#c0c';
+  ctx.shadowBlur = 4;
+  ctx.shadowOffsetX = 6;
+  ctx.shadowOffsetY = 10;
+  ctx.textAlign = 'center';
+  ctx.font = '35px Arial';
+  ctx.scale(2, 2);
+  ctx.strokeText("Sha", 33, 40);
+  ctx.rotate(Math.PI/2);
+  ctx.fillText("dow", 50, -72);
+};
+
+tests['shadow image'] = function(ctx, done){
+  var img = new Image;
+  img.onload = function(){
+    ctx.shadowColor = '#f3ac22';
+    ctx.shadowBlur = 2;
+    ctx.shadowOffsetX = 8;
+    ctx.shadowOffsetY = 8;
+    ctx.drawImage(img, 0, 0);
+    done();
+  };
+  img.onerror = function(){}
+  img.src = 'star.png';
+};
+
 tests['shadow integration'] = function(ctx){
   ctx.shadowBlur = 5;
   ctx.shadowOffsetX = 10;

test/server.js

@@ -28,18 +28,27 @@ app.get('/', function(req, res){
   res.render('tests');
 });
 
-app.post('/render', function(req, res, next){
+function testFn(req){
   // Normalize state.png as ./public/state.png
   // no good way around this at the moment
   req.body.fn = req.body.fn
     .replace("'state.png'", "'" + __dirname + "/public/state.png'")
-    .replace("'face.jpeg'", "'" + __dirname + "/public/face.jpeg'");
+    .replace("'face.jpeg'", "'" + __dirname + "/public/face.jpeg'")
+    .replace("'star.png'", "'" + __dirname + "/public/star.png'");
 
   // Do not try this at home :)
-  var fn = eval('(' + req.body.fn + ')')
-    , width = req.body.width
-    , height = req.body.height
-    , canvas = new Canvas(width, height)
+  return eval('(' + req.body.fn + ')');
+}
+
+function createCanvas(req, type){
+  var width = req.body.width
+    , height = req.body.height;
+  return new Canvas(width, height, type);
+}
+
+app.post('/render', function(req, res, next){
+  var fn = testFn(req)
+    , canvas = createCanvas(req)
     , ctx = canvas.getContext('2d')
     , start = new Date;
 
@@ -55,6 +64,24 @@ app.post('/render', function(req, res, next){
     : fn(ctx), done();
 });
 
+app.post('/pdf', function(req, res, next){
+  req.body = JSON.parse(req.body.json);
+  var fn = testFn(req)
+    , canvas = createCanvas(req, 'pdf')
+    , ctx = canvas.getContext('2d');
+
+  function done(){
+    res.writeHead(200, {'Content-Type' : 'application/pdf'});
+    res.write(canvas.toBuffer());
+    res.end();
+  }
+
+  2 == fn.length
+    ? fn(ctx, done)
+    : fn(ctx), done();
+});
+
+
 var port = parseInt(process.argv[2] || '4000', 10);
 app.listen(port);
 console.log('Test server listening on port %d', port);