From 730ebcfcaa3d30900d685eed6bb49e6e6e84fe90 Mon Sep 17 00:00:00 2001 From: Niklas von Hertzen Date: Tue, 26 Jun 2012 17:18:34 +0300 Subject: [PATCH] border-radius parsing --- src/Core.js | 8 +++++++ src/Parse.js | 56 ++++++++++++++++++++++++++-------------------- tests/borders.html | 6 ++--- 3 files changed, 43 insertions(+), 27 deletions(-) diff --git a/src/Core.js b/src/Core.js index f23709f..149830c 100644 --- a/src/Core.js +++ b/src/Core.js @@ -120,6 +120,14 @@ _html2canvas.Util.getCSS = function (el, attribute) { val[ 0 ] = ( val[0].indexOf( "%" ) === -1 ) ? toPX( attribute + "X", val[ 0 ] ) : val[ 0 ]; val[ 1 ] = ( val[1] === undefined ) ? val[0] : val[1]; // IE 9 doesn't return double digit always val[ 1 ] = ( val[1].indexOf( "%" ) === -1 ) ? toPX( attribute + "Y", val[ 1 ] ) : val[ 1 ]; + } else if ( /border(Top|Bottom)(Left|Right)Radius/.test( attribute) ) { + var arr = val.split(" "); + if ( arr.length <= 1 ) { + arr[ 1 ] = arr[ 0 ]; + } + arr[ 0 ] = parseInt( arr[ 0 ], 10 ); + arr[ 1 ] = parseInt( arr[ 1 ], 10 ); + val = arr; } } else if ( el.currentStyle ) { diff --git a/src/Parse.js b/src/Parse.js index 0914135..283e852 100644 --- a/src/Parse.js +++ b/src/Parse.js @@ -619,6 +619,7 @@ _html2canvas.Parse = function ( images, options ) { by, bw, bh, + i, borderArgs, borderBounds, borders = (function(el){ @@ -636,9 +637,10 @@ _html2canvas.Parse = function ( images, options ) { return borders; }(el)), + // http://www.w3.org/TR/css3-background/#the-border-radius borderRadius = (function( el ) { var borders = [], - sides = ["TopLeft","TopRight","BottomLeft","BottomRight"], + sides = ["TopLeft","TopRight","BottomRight","BottomLeft"], s; for (s = 0; s < 4; s+=1){ @@ -664,10 +666,11 @@ _html2canvas.Parse = function ( images, options ) { // top border bh = borders[0].width; - borderArgs[ 0 ] = [ bx, by ]; // top left - borderArgs[ 1 ] = [ bx + bw, by ]; // top right - borderArgs[ 2 ] = [ bx + bw - borders[ 1 ].width, by + bh ]; // bottom right - borderArgs[ 3 ] = [ bx + borders[ 3 ].width, by + bh ]; // bottom left + i = 0; + borderArgs[ i++ ] = [ "line", bx, by ]; // top left + borderArgs[ i++ ] = [ "line", bx + bw, by ]; // top right + borderArgs[ i++ ] = [ "line", bx + bw - borders[ 1 ].width, by + bh ]; // bottom right + borderArgs[ i++ ] = [ "line", bx + borders[ 3 ].width, by + bh ]; // bottom left break; case 1: @@ -675,31 +678,35 @@ _html2canvas.Parse = function ( images, options ) { bx = x + w - (borders[1].width); bw = borders[1].width; - borderArgs[ 0 ] = [ bx, by + borders[ 0 ].width]; // top left - borderArgs[ 1 ] = [ bx + bw, by ]; // top right - borderArgs[ 2 ] = [ bx + bw, by + bh + borders[ 2 ].width ]; // bottom right - borderArgs[ 3 ] = [ bx, by + bh ]; // bottom left + i = 0; + borderArgs[ i++ ] = [ "line", bx, by + borders[ 0 ].width]; // top left + borderArgs[ i++ ] = [ "line", bx + bw, by ]; // top right + borderArgs[ i++ ] = [ "line", bx + bw, by + bh + borders[ 2 ].width ]; // bottom right + borderArgs[ i++ ] = [ "line", bx, by + bh ]; // bottom left break; case 2: // bottom border by = (by + h) - (borders[2].width); bh = borders[2].width; - - borderArgs[ 0 ] = [ bx + borders[ 3 ].width, by ]; // top left - borderArgs[ 1 ] = [ bx + bw - borders[ 2 ].width, by ]; // top right - borderArgs[ 2 ] = [ bx + bw, by + bh ]; // bottom right - borderArgs[ 3 ] = [ bx, by + bh ]; // bottom left + + + i = 0; + borderArgs[ i++ ] = [ "line", bx + borders[ 3 ].width, by ]; // top left + borderArgs[ i++ ] = [ "line", bx + bw - borders[ 2 ].width, by ]; // top right + borderArgs[ i++ ] = [ "line", bx + bw, by + bh ]; // bottom right + borderArgs[ i++ ] = [ "line", bx, by + bh ]; // bottom left break; case 3: // left border bw = borders[3].width; - borderArgs[ 0 ] = [ bx, by ]; // top left - borderArgs[ 1 ] = [ bx + bw, by + borders[ 0 ].width ]; // top right - borderArgs[ 2 ] = [ bx + bw, by + bh ]; // bottom right - borderArgs[ 3 ] = [ bx, by + bh + borders[ 2 ].width ]; // bottom left + i = 0; + borderArgs[ i++ ] = [ "line", bx, by ]; // top left + borderArgs[ i++ ] = [ "line", bx + bw, by + borders[ 0 ].width ]; // top right + borderArgs[ i++ ] = [ "line", bx + bw, by + bh ]; // bottom right + borderArgs[ i++ ] = [ "line", bx, by + bh + borders[ 2 ].width ]; // bottom left break; } @@ -721,12 +728,13 @@ _html2canvas.Parse = function ( images, options ) { if ( borderData.color !== "transparent" ){ ctx.setVariable( "fillStyle", borderData.color ); - var shape = ctx.drawShape(); - shape.moveTo.apply( null, borderArgs[ 0 ] ); // top left - shape.lineTo.apply( null, borderArgs[ 1 ] ); // top right - shape.lineTo.apply( null, borderArgs[ 2 ] ); // bottom right - shape.lineTo.apply( null, borderArgs[ 3 ] ); // bottom left - // ctx.fillRect (x, y, w, h); + var shape = ctx.drawShape(), + numBorderArgs = borderArgs.length; + + for ( i = 0; i < numBorderArgs; i++ ) { + shape[( i === 0) ? "moveTo" : borderArgs[ i ][ 0 ] + "To" ].apply( null, borderArgs[ i ].slice(1) ); + } + numDraws+=1; } diff --git a/tests/borders.html b/tests/borders.html index aad026a..4957ff0 100644 --- a/tests/borders.html +++ b/tests/borders.html @@ -37,11 +37,11 @@ height: 201px; top: 20px; left: 170px; - border: 20px dotted #990000; + border: 20px solid #990000; background-color: #ffdddd; text-align: center; - - border-top-color: blue; + border-radius: 50px/160px; + border-left-color: violet; border-top-width:0px; }