UIWebView的HTML5扩展之canvas篇
先前发布大那个所谓的"HTML5"扩展严格说来还算不是"HTML5"。曲曲几行JS代码就自诩为HTML5扩展多少有些标题党的嫌疑。
而相比之下,本篇的主题canvas可以说算是真正的HTML5扩展了。canvas作为HTML5标准体系下的JavaScript API, 不仅被苹果系统自带的Safari所支持,也被UIWebView类所支持。
下面直接贴上新增类目canvas部分的源代码。
完整代码下载地址:https://github.com/duzixi/UIWebView-HTML5 (下载按钮在页面右下方,“Download ZIP” . 欢迎fork)
本篇博文首发地址:http://blog.csdn.net/duzixi
<pre name="code" class="objc">@interface UIWebView (Canvas) /// 创建一个指定大小的画布 - (void)createCanvas:(NSString *)canvasId width:(NSInteger)width height:(NSInteger)height; /// 在指定位置创建一个指定大小的画布 - (void)createCanvas:(NSString *)canvasId width:(NSInteger)width height:(NSInteger)height x:(NSInteger)x y:(NSInteger)y; /// 绘制矩形填充 context.fillRect(x,y,width,height) - (void)fillRectOnCanvas:(NSString *)canvasId x:(NSInteger)x y:(NSInteger)y width:(NSInteger)width height:(NSInteger)height uicolor:(UIColor *)color; /// 绘制矩形边框 context.strokeRect(x,y,width,height) - (void)strokeRectOnCanvas:(NSString *)canvasId x:(NSInteger)x y:(NSInteger)y width:(NSInteger)width height:(NSInteger)height uicolor:(UIColor *)color lineWidth:(NSInteger)lineWidth; /// 清除矩形区域 context.clearRect(x,y,width,height) - (void)clearRectOnCanvas:(NSString *)canvasId x:(NSInteger)x y:(NSInteger)y width:(NSInteger)width height:(NSInteger) height; /// 绘制圆弧填充 context.arc(x, y, radius, starAngle,endAngle, anticlockwise) - (void)arcOnCanvas:(NSString *)canvasId centerX:(NSInteger)x centerY:(NSInteger)y radius:(NSInteger)r startAngle:(float)startAngle endAngle:(float)endAngle anticlockwise:(BOOL)anticlockwise uicolor:(UIColor *)color; /// 绘制一条线段 context.moveTo(x,y) context.lineTo(x,y) - (void)lineOnCanvas:(NSString *)canvasId x1:(NSInteger)x1 y1:(NSInteger)y1 x2:(NSInteger)x2 y2:(NSInteger)y2 uicolor:(UIColor *)color lineWidth:(NSInteger)lineWidth; /// 绘制一条折线 - (void)linesOnCanvas:(NSString *)canvasId points:(NSArray *)points unicolor:(UIColor *)color lineWidth:(NSInteger)lineWidth; /// 绘制贝塞尔曲线 context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y) - (void)bezierCurveOnCanvas:(NSString *)canvasId x1:(NSInteger)x1 y1:(NSInteger)y1 cp1x:(NSInteger)cp1x cp1y:(NSInteger)cp1y cp2x:(NSInteger)cp2x cp2y:(NSInteger)cp2y x2:(NSInteger)x2 y2:(NSInteger)y2 unicolor:(UIColor *)color lineWidth:(NSInteger)lineWidth; /// 绘制二次样条曲线 context.quadraticCurveTo(qcpx,qcpy,qx,qy) // coming soon... /// 显示图像的一部分 context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh) - (void)drawImage:(NSString *)src onCanvas:(NSString *)canvasId sx:(NSInteger)sx sy:(NSInteger)sy sw:(NSInteger)sw sh:(NSInteger)sh dx:(NSInteger)dx dy:(NSInteger)dy dw:(NSInteger)dw dh:(NSInteger)dh; @end
#pragma mark - #pragma mark 在网页上画图 #import "UIColor+Change.h" //ver.2014.7.12 @implementation UIWebView (Canvas) /// 创建一个指定大小的透明画布 - (void)createCanvas:(NSString *)canvasId width:(NSInteger)width height:(NSInteger)height { NSString *jsString = [NSString stringWithFormat: @"var canvas = document.createElement('canvas');" "canvas.id = %@; canvas.width = %d; canvas.height = %d;" "document.body.appendChild(canvas);" "var g = canvas.getContext('2d');" "g.strokeRect(%d,%d,%d,%d);", canvasId, width, height, 0 ,0 ,width,height]; [self stringByEvaluatingJavaScriptFromString:jsString]; } /// 在指定位置创建一个指定大小的透明画布 - (void)createCanvas:(NSString *)canvasId width:(NSInteger)width height:(NSInteger)height x:(NSInteger)x y:(NSInteger)y { //[self createCanvas:canvasId width:width height:height]; NSString *jsString = [NSString stringWithFormat: @"var canvas = document.createElement('canvas');" "canvas.id = %@; canvas.width = %d; canvas.height = %d;" "canvas.style.position = 'absolute';" "canvas.style.top = '%d';" "canvas.style.left = '%d';" "document.body.appendChild(canvas);" "var g = canvas.getContext('2d');" "g.strokeRect(%d,%d,%d,%d);", canvasId, width, height, y, x, 0 ,0 ,width,height]; [self stringByEvaluatingJavaScriptFromString:jsString]; } /// 绘制矩形填充 context.fillRect(x,y,width,height) - (void)fillRectOnCanvas:(NSString *)canvasId x:(NSInteger)x y:(NSInteger)y width:(NSInteger)width height:(NSInteger) height uicolor:(UIColor *)color { NSString *jsString = [NSString stringWithFormat: @"var canvas = document.getElementById('%@');" "var context = canvas.getContext('2d');" "context.fillStyle = '%@';" "context.fillRect(%d,%d,%d,%d);" ,canvasId, [color canvasColorString], x, y, width, height]; [self stringByEvaluatingJavaScriptFromString:jsString]; } /// 绘制矩形边框 strokeRect(x,y,width,height) - (void)strokeRectOnCanvas:(NSString *)canvasId x:(NSInteger)x y:(NSInteger)y width:(NSInteger)width height:(NSInteger) height uicolor:(UIColor *)color lineWidth:(NSInteger)lineWidth { NSString *jsString = [NSString stringWithFormat: @"var canvas = document.getElementById('%@');" "var context = canvas.getContext('2d');" "context.strokeStyle = '%@';" "context.lineWidth = '%d';" "context.strokeRect(%d,%d,%d,%d);" ,canvasId, [color canvasColorString], lineWidth, x, y, width, height]; [self stringByEvaluatingJavaScriptFromString:jsString]; } /// 清除矩形区域 context.clearRect(x,y,width,height) - (void)clearRectOnCanvas:(NSString *)canvasId x:(NSInteger)x y:(NSInteger)y width:(NSInteger)width height:(NSInteger) height { NSString *jsString = [NSString stringWithFormat: @"var canvas = document.getElementById('%@');" "var context = canvas.getContext('2d');" "context.clearRect(%d,%d,%d,%d);" ,canvasId, x, y, width, height]; [self stringByEvaluatingJavaScriptFromString:jsString]; } /// 绘制圆弧填充 context.arc(x, y, radius, starAngle,endAngle, anticlockwise) - (void)arcOnCanvas:(NSString *)canvasId centerX:(NSInteger)x centerY:(NSInteger)y radius:(NSInteger)r startAngle:(float)startAngle endAngle:(float)endAngle anticlockwise:(BOOL)anticlockwise uicolor:(UIColor *)color { NSString *jsString = [NSString stringWithFormat: @"var canvas = document.getElementById('%@');" "var context = canvas.getContext('2d');" "context.beginPath();" "context.arc(%d,%d,%d,%f,%f,%@);" "context.closePath();" "context.fillStyle = '%@';" "context.fill();", canvasId, x, y, r, startAngle, endAngle, anticlockwise ? @"true" : @"false", [color canvasColorString]]; [self stringByEvaluatingJavaScriptFromString:jsString]; } /// 绘制一条线段 context.moveTo(x,y) context.lineTo(x,y) - (void)lineOnCanvas:(NSString *)canvasId x1:(NSInteger)x1 y1:(NSInteger)y1 x2:(NSInteger)x2 y2:(NSInteger)y2 uicolor:(UIColor *)color lineWidth:(NSInteger)lineWidth { NSString *jsString = [NSString stringWithFormat: @"var canvas = document.getElementById('%@');" "var context = canvas.getContext('2d');" "context.beginPath();" "context.moveTo(%d,%d);" "context.lineTo(%d,%d);" "context.closePath();" "context.strokeStyle = '%@';" "context.lineWidth = %d;" "context.stroke();", canvasId, x1, y1, x2, y2, [color canvasColorString], lineWidth]; [self stringByEvaluatingJavaScriptFromString:jsString]; } /// 绘制一条折线 - (void)linesOnCanvas:(NSString *)canvasId points:(NSArray *)points unicolor:(UIColor *)color lineWidth:(NSInteger)lineWidth { NSString *jsString = [NSString stringWithFormat: @"var canvas = document.getElementById('%@');" "var context = canvas.getContext('2d');" "context.beginPath();", canvasId]; for (int i = 0; i < [points count] / 2; i++) { jsString = [jsString stringByAppendingFormat:@"context.lineTo(%@,%@);", points[i * 2], points[i * 2 + 1]]; } jsString = [jsString stringByAppendingFormat:@"" "context.strokeStyle = '%@';" "context.lineWidth = %d;" "context.stroke();", [color canvasColorString], lineWidth]; [self stringByEvaluatingJavaScriptFromString:jsString]; } /// 绘制贝塞尔曲线 context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y) - (void)bezierCurveOnCanvas:(NSString *)canvasId x1:(NSInteger)x1 y1:(NSInteger)y1 cp1x:(NSInteger)cp1x cp1y:(NSInteger)cp1y cp2x:(NSInteger)cp2x cp2y:(NSInteger)cp2y x2:(NSInteger)x2 y2:(NSInteger)y2 unicolor:(UIColor *)color lineWidth:(NSInteger)lineWidth { NSString *jsString = [NSString stringWithFormat: @"var canvas = document.getElementById('%@');" "var context = canvas.getContext('2d');" "context.beginPath();" "context.moveTo(%d,%d);" "context.bezierCurveTo(%d,%d,%d,%d,%d,%d);" "context.strokeStyle = '%@';" "context.lineWidth = %d;" "context.stroke();", canvasId, x1, y1, cp1x, cp1y, cp2x, cp2y, x2, y2, [color canvasColorString], lineWidth]; [self stringByEvaluatingJavaScriptFromString:jsString]; } /// 显示图像的一部分 context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh) - (void)drawImage:(NSString *)src onCanvas:(NSString *)canvasId sx:(NSInteger)sx sy:(NSInteger)sy sw:(NSInteger)sw sh:(NSInteger)sh dx:(NSInteger)dx dy:(NSInteger)dy dw:(NSInteger)dw dh:(NSInteger)dh { NSString *jsString = [NSString stringWithFormat: @"var image = new Image();" "image.src = '%@';" "var canvas = document.getElementById('%@');" "var context = canvas.getContext('2d');" "context.drawImage(image,%d,%d,%d,%d,%d,%d,%d,%d)", src, canvasId, sx, sy, sw, sh, dx, dy, dw, dh]; [self stringByEvaluatingJavaScriptFromString:jsString]; } @end
熟知canvas的朋友都知道,它的功能绝不仅仅是上面列出的这些。由于最近工作比较繁忙,先把这些比较基本的献给大家。
尤其是最后一个方法,是我的一个学生做项目时问起的。问是否有方法能截取网页上的图片,让它显示一部分。
相信也有许多朋友有类似的需求。代码匆忙整理,简单测试,若有疏忽,欢迎指正。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。