mirror/html2canvas
1
0
Fork 0
mirror of https://github.com/niklasvh/html2canvas.git synced 2023-08-10 21:13:10 +03:00
Code Issues Projects Releases Wiki Activity

border-radius parsing

Browse Source
This commit is contained in:
Niklas von Hertzen 2012-06-26 17:18:34 +03:00
parent cce6e3537c
commit 730ebcfcaa
3 changed files with 43 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/Core.js
View File

@ -120,6 +120,14 @@ _html2canvas.Util.getCSS = function (el, attribute) {
val[ 0 ] = ( val[0].indexOf( "%" ) === -1 ) ? toPX( attribute + "X", val[ 0 ] ) : val[ 0 ]; 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] === 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 ]; 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 ) { } else if ( el.currentStyle ) {

54
src/Parse.js
View File

@ -619,6 +619,7 @@ _html2canvas.Parse = function ( images, options ) {
by, by,
bw, bw,
bh, bh,
i,
borderArgs, borderArgs,
borderBounds, borderBounds,
borders = (function(el){ borders = (function(el){
@ -636,9 +637,10 @@ _html2canvas.Parse = function ( images, options ) {
return borders; return borders;
}(el)), }(el)),
// http://www.w3.org/TR/css3-background/#the-border-radius
borderRadius = (function( el ) { borderRadius = (function( el ) {
var borders = [], var borders = [],
sides = ["TopLeft","TopRight","BottomLeft","BottomRight"], sides = ["TopLeft","TopRight","BottomRight","BottomLeft"],
s; s;
for (s = 0; s < 4; s+=1){ for (s = 0; s < 4; s+=1){
@ -664,10 +666,11 @@ _html2canvas.Parse = function ( images, options ) {
// top border // top border
bh = borders[0].width; bh = borders[0].width;
borderArgs[ 0 ] = [ bx, by ]; // top left i = 0;
borderArgs[ 1 ] = [ bx + bw, by ]; // top right borderArgs[ i++ ] = [ "line", bx, by ]; // top left
borderArgs[ 2 ] = [ bx + bw - borders[ 1 ].width, by + bh ]; // bottom right borderArgs[ i++ ] = [ "line", bx + bw, by ]; // top right
borderArgs[ 3 ] = [ bx + borders[ 3 ].width, by + bh ]; // bottom left borderArgs[ i++ ] = [ "line", bx + bw - borders[ 1 ].width, by + bh ]; // bottom right
borderArgs[ i++ ] = [ "line", bx + borders[ 3 ].width, by + bh ]; // bottom left
break; break;
case 1: case 1:
@ -675,10 +678,11 @@ _html2canvas.Parse = function ( images, options ) {
bx = x + w - (borders[1].width); bx = x + w - (borders[1].width);
bw = borders[1].width; bw = borders[1].width;
borderArgs[ 0 ] = [ bx, by + borders[ 0 ].width]; // top left i = 0;
borderArgs[ 1 ] = [ bx + bw, by ]; // top right borderArgs[ i++ ] = [ "line", bx, by + borders[ 0 ].width]; // top left
borderArgs[ 2 ] = [ bx + bw, by + bh + borders[ 2 ].width ]; // bottom right borderArgs[ i++ ] = [ "line", bx + bw, by ]; // top right
borderArgs[ 3 ] = [ bx, by + bh ]; // bottom left borderArgs[ i++ ] = [ "line", bx + bw, by + bh + borders[ 2 ].width ]; // bottom right
borderArgs[ i++ ] = [ "line", bx, by + bh ]; // bottom left
break; break;
case 2: case 2:
@ -686,20 +690,23 @@ _html2canvas.Parse = function ( images, options ) {
by = (by + h) - (borders[2].width); by = (by + h) - (borders[2].width);
bh = 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 i = 0;
borderArgs[ 2 ] = [ bx + bw, by + bh ]; // bottom right borderArgs[ i++ ] = [ "line", bx + borders[ 3 ].width, by ]; // top left
borderArgs[ 3 ] = [ bx, by + bh ]; // bottom 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; break;
case 3: case 3:
// left border // left border
bw = borders[3].width; bw = borders[3].width;
borderArgs[ 0 ] = [ bx, by ]; // top left i = 0;
borderArgs[ 1 ] = [ bx + bw, by + borders[ 0 ].width ]; // top right borderArgs[ i++ ] = [ "line", bx, by ]; // top left
borderArgs[ 2 ] = [ bx + bw, by + bh ]; // bottom right borderArgs[ i++ ] = [ "line", bx + bw, by + borders[ 0 ].width ]; // top right
borderArgs[ 3 ] = [ bx, by + bh + borders[ 2 ].width ]; // bottom left borderArgs[ i++ ] = [ "line", bx + bw, by + bh ]; // bottom right
borderArgs[ i++ ] = [ "line", bx, by + bh + borders[ 2 ].width ]; // bottom left
break; break;
} }
@ -721,12 +728,13 @@ _html2canvas.Parse = function ( images, options ) {
if ( borderData.color !== "transparent" ){ if ( borderData.color !== "transparent" ){
ctx.setVariable( "fillStyle", borderData.color ); ctx.setVariable( "fillStyle", borderData.color );
var shape = ctx.drawShape(); var shape = ctx.drawShape(),
shape.moveTo.apply( null, borderArgs[ 0 ] ); // top left numBorderArgs = borderArgs.length;
shape.lineTo.apply( null, borderArgs[ 1 ] ); // top right
shape.lineTo.apply( null, borderArgs[ 2 ] ); // bottom right for ( i = 0; i < numBorderArgs; i++ ) {
shape.lineTo.apply( null, borderArgs[ 3 ] ); // bottom left shape[( i === 0) ? "moveTo" : borderArgs[ i ][ 0 ] + "To" ].apply( null, borderArgs[ i ].slice(1) );
// ctx.fillRect (x, y, w, h); }
numDraws+=1; numDraws+=1;
} }

6
tests/borders.html
View File

@ -37,11 +37,11 @@
height: 201px; height: 201px;
top: 20px; top: 20px;
left: 170px; left: 170px;
border: 20px dotted #990000; border: 20px solid #990000;
background-color: #ffdddd; background-color: #ffdddd;
text-align: center; text-align: center;
border-radius: 50px/160px;
border-top-color: blue; border-left-color: violet;
border-top-width:0px; border-top-width:0px;
} }