corrected border drawing with multiple colors

initial code for border-radius implemented
This commit is contained in:
Niklas von Hertzen 2012-06-26 15:15:46 +03:00
parent 311a67ee22
commit cce6e3537c
4 changed files with 123 additions and 14 deletions

View File

@ -4,7 +4,7 @@
http://www.twitter.com/niklasvh http://www.twitter.com/niklasvh
Released under MIT License Released under MIT License
*/ */
/* /*
* New function for traversing elements * New function for traversing elements
@ -131,7 +131,7 @@ _html2canvas.Parse = function ( images, options ) {
// Drawing a rectangle // Drawing a rectangle
function renderRect (ctx, x, y, w, h, bgcolor) { function renderRect (ctx, x, y, w, h, bgcolor) {
if (bgcolor !=="transparent"){ if ( bgcolor !== "transparent" ){
ctx.setVariable("fillStyle", bgcolor); ctx.setVariable("fillStyle", bgcolor);
ctx.fillRect (x, y, w, h); ctx.fillRect (x, y, w, h);
numDraws+=1; numDraws+=1;
@ -308,7 +308,7 @@ _html2canvas.Parse = function ( images, options ) {
/* /*
need to be defined in the order as defined in http://www.w3.org/TR/CSS21/fonts.html#font-shorthand need to be defined in the order as defined in http://www.w3.org/TR/CSS21/fonts.html#font-shorthand
to properly work in Firefox to properly work in Firefox
*/ */
ctx.setVariable("font", font_style+ " " + font_variant + " " + bold + " " + size + " " + family); ctx.setVariable("font", font_style+ " " + font_variant + " " + bold + " " + size + " " + family);
if (align){ if (align){
@ -450,9 +450,9 @@ _html2canvas.Parse = function ( images, options ) {
if ( el.parentNode ) { if ( el.parentNode ) {
while( childs[ ++i ] !== el ) { while( childs[ ++i ] !== el ) {
if ( childs[ i ].nodeType === 1 ) { if ( childs[ i ].nodeType === 1 ) {
count++; count++;
} }
} }
return count; return count;
} else { } else {
@ -619,6 +619,7 @@ _html2canvas.Parse = function ( images, options ) {
by, by,
bw, bw,
bh, bh,
borderArgs,
borderBounds, borderBounds,
borders = (function(el){ borders = (function(el){
var borders = [], var borders = [],
@ -634,12 +635,24 @@ _html2canvas.Parse = function ( images, options ) {
return borders; return borders;
}(el)); }(el)),
borderRadius = (function( el ) {
var borders = [],
sides = ["TopLeft","TopRight","BottomLeft","BottomRight"],
s;
for (s = 0; s < 4; s+=1){
borders.push( getCSS(el, 'border' + sides[s] + 'Radius') );
}
return borders;
})( el );
for (borderSide = 0; borderSide < 4; borderSide+=1){
borderData = borders[borderSide];
for ( borderSide = 0; borderSide < 4; borderSide+=1 ) {
borderData = borders[ borderSide ];
borderArgs = [];
if (borderData.width>0){ if (borderData.width>0){
bx = x; bx = x;
by = y; by = y;
@ -650,20 +663,44 @@ _html2canvas.Parse = function ( images, options ) {
case 0: case 0:
// top border // top border
bh = borders[0].width; 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
break; break;
case 1: case 1:
// right border // right border
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
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
break; break;
case 2: case 2:
// bottom border // bottom border
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
borderArgs[ 2 ] = [ bx + bw, by + bh ]; // bottom right
borderArgs[ 3 ] = [ 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
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
break; break;
} }
@ -679,8 +716,24 @@ _html2canvas.Parse = function ( images, options ) {
} }
if (borderBounds.width>0 && borderBounds.height>0){ if ( borderBounds.width > 0 && borderBounds.height > 0 ) {
renderRect(ctx, bx, by, borderBounds.width, borderBounds.height, borderData.color);
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);
numDraws+=1;
}
// renderRect(ctx, bx, by, borderBounds.width, borderBounds.height, borderData.color);
} }
@ -1240,7 +1293,7 @@ _html2canvas.Parse = function ( images, options ) {
/* /*
SVG powered HTML rendering, non-tainted canvas available from FF 11+ onwards SVG powered HTML rendering, non-tainted canvas available from FF 11+ onwards
*/ */
if ( support.svgRendering ) { if ( support.svgRendering ) {
(function( body ){ (function( body ){

View File

@ -18,6 +18,44 @@ function h2cRenderContext(width, height) {
'arguments': arguments 'arguments': arguments
}); });
}, },
drawShape: function() {
var shape = [];
storage.push({
type: "function",
name: "drawShape",
'arguments': shape
});
return {
moveTo: function() {
shape.push({
name: "moveTo",
'arguments': arguments
});
},
lineTo: function() {
shape.push({
name: "lineTo",
'arguments': arguments
});
},
bezierCurveTo: function() {
shape.push({
name: "bezierCurveTo",
'arguments': arguments
});
},
quadraticCurveTo: function() {
shape.push({
name: "quadraticCurveTo",
'arguments': arguments
});
}
};
},
drawImage: function () { drawImage: function () {
storage.push({ storage.push({
type: "function", type: "function",

View File

@ -147,11 +147,24 @@ _html2canvas.Renderer.Canvas = function( options ) {
if (!usingFlashcanvas || renderItem['arguments'][0] + renderItem['arguments'][2] < flashMaxSize && renderItem['arguments'][1] + renderItem['arguments'][3] < flashMaxSize) { if (!usingFlashcanvas || renderItem['arguments'][0] + renderItem['arguments'][2] < flashMaxSize && renderItem['arguments'][1] + renderItem['arguments'][3] < flashMaxSize) {
ctx.fillRect.apply( ctx, renderItem['arguments'] ); ctx.fillRect.apply( ctx, renderItem['arguments'] );
} }
}else if(renderItem.name === "fillText") { } else if (renderItem.name === "drawShape") {
( function( args ) {
var i, len = args.length;
ctx.beginPath();
for ( i = 0; i < len; i++ ) {
ctx[ args[ i ].name ].apply( ctx, args[ i ]['arguments'] );
}
ctx.closePath();
ctx.fill();
})( renderItem['arguments'] );
} else if (renderItem.name === "fillText") {
if (!usingFlashcanvas || renderItem['arguments'][1] < flashMaxSize && renderItem['arguments'][2] < flashMaxSize) { if (!usingFlashcanvas || renderItem['arguments'][1] < flashMaxSize && renderItem['arguments'][2] < flashMaxSize) {
ctx.fillText.apply( ctx, renderItem['arguments'] ); ctx.fillText.apply( ctx, renderItem['arguments'] );
} }
}else if(renderItem.name === "drawImage") { } else if (renderItem.name === "drawImage") {
if (renderItem['arguments'][8] > 0 && renderItem['arguments'][7]){ if (renderItem['arguments'][8] > 0 && renderItem['arguments'][7]){
if ( hasCTX && options.taintTest ) { if ( hasCTX && options.taintTest ) {

View File

@ -26,6 +26,8 @@
border: 23px double #669966; border: 23px double #669966;
background-color: #ccffcc; background-color: #ccffcc;
padding-left: 5px; padding-left: 5px;
border-left-color:yellow;
border-right-color: blueviolet;
} }
#div2 { #div2 {
@ -38,6 +40,9 @@
border: 20px dotted #990000; border: 20px dotted #990000;
background-color: #ffdddd; background-color: #ffdddd;
text-align: center; text-align: center;
border-top-color: blue;
border-top-width:0px;
} }
#div4 { #div4 {