【iOS】UIWebView的HTML5擴展之canvas篇

時間 2019-11-25

標籤 iOS uiwebview html5 html 擴展 canvas 欄目 iOS 简体版

原文原文鏈接

先前公佈大那個所謂的"HTML5"擴展嚴格說來還算不是"HTML5"。曲曲幾行JS代碼就自誇爲HTML5擴展多少有些標題黨的嫌疑。git

而相比之下，本篇的主題canvas可以說算是真正的HTML5擴展了。canvas做爲HTML5標準體系下的JavaScript API, 不只被蘋果系統自帶的Safari所支持，也被UIWebView類所支持。github

如下直接貼上新增類目canvas部分的源碼。canvas

完整代碼下載地址：https://github.com/duzixi/UIWebView-HTML5 （下載button在頁面右下方，「Download ZIP」 . 歡迎fork）app

本篇博文首發地址：http://blog.csdn.net/duzixiui

<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的朋友都知道，它的功能毫不不過上面列出的這些。由於近期工做比較繁忙，先把這些比較主要的獻給你們。

尤爲是最後一個方法，是個人一個學生作項目時問起的。問是否有方法能截取網頁上的圖片。讓它顯示一部分。lua

相信也有不少朋友有相似的需求。代碼匆忙整理。簡單測試，如有疏忽。歡迎指正。.net