【iOS】UIWebView的HTML5扩展之canvas篇
2024-09-07 12:14:49
先前公布大那个所谓的"HTML5"扩展严格说来还算不是"HTML5"。曲曲几行JS代码就自诩为HTML5扩展多少有些标题党的嫌疑。
而相比之下，本篇的主题canvas能够说算是真正的HTML5扩展了。canvas作为HTML5标准体系下的JavaScript API, 不仅被苹果系统自带的Safari所支持，也被UIWebView类所支持。
以下直接贴上新增类目canvas部分的源码。
完整代码下载地址：https://github.com/duzixi/UIWebView-HTML5 （下载button在页面右下方，“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的朋友都知道，它的功能绝不不过上面列出的这些。因为近期工作比較繁忙，先把这些比較主要的献给大家。
尤其是最后一个方法，是我的一个学生做项目时问起的。问是否有方法能截取网页上的图片。让它显示一部分。
相信也有很多朋友有类似的需求。代码匆忙整理。简单測试，若有疏忽。欢迎指正。
最新文章
- "NHibernate.Exceptions.GenericADOException: could not load an entity" 解决方案
- python实用笔记,加快编程速度，lamdba,三元运算,open.
- Telegram传奇：俄罗斯富豪、黑客高手、极权和阴谋…
- tomcat源码导入eclipse步骤
- java语言基础02
- 【风马一族_Java】如何获取ACSLL表的值
- 关于local storage 和 session storage以及cookie 区别简析
- 在 Java 中高效使用锁的技巧--转载
- Delphi ComboBox的属性和事件、及几个鼠标事件的触发
- Mybatis 示例之 Association - 偶尔记一下 - 博客频道 - CSDN.NET
- 修改tomcat图标
- hive发杂数据结构的使用，struct，array，map
- eclipse maven 构建简单springmvc项目
- 使用cloudreve搭建个人网盘
- 【Noip模拟 20161005】运货
- 求解100以内的所有素数（问题来自PythonTip）
- 在windows server 2012上安装.net3.5
- 使用不同的namespace让不同的kafka/Storm连接同一个zookeeper
- 43. Multiply Strings 字符串表示的大数乘法
- Design-341. Flatten Nested List Iterator