Question

我正在开发一款必须在人像iPhone屏幕上绘制320条垂直渐变线的应用，其中每条渐变线为1px或2px宽（非视网膜与视网膜）。每条渐变线都有1000个位置，每个位置都能有独特的颜色。这1000种颜色（浮动）位于C型2D阵列（阵列阵列，320种1000色阵列）中

目前，渐变线是在自定义UIView的drawRect方法内的For循环中绘制的。我遇到的问题是，在For循环中循环并绘制所有320行需要超过一秒的时间。在那一秒内，我有另一个线程正在更新颜色数组，但由于绘制时间超过一秒，我没有看到每个更新。我看到每一次或第三次更新。

我在Android代码中使用完全相同的程序，使用SurfaceView在一秒钟内多次绘制640个渐变线（数量加倍）没有问题。我的Android应用从不会错过更新。

如果您查看Android代码，它实际上会将渐变线绘制到两个单独的画布上。阵列大小是动态的，可以达到Android手机横向分辨率宽度的一半（例如1280宽度= 1280/2 = 640行）。由于Android应用程序足够快，我允许横向模式。即使将数据翻倍为iPhone并绘制到两个独立的画布，Android代码也会每秒运行多次。 iPhone代码的行数只有一半而只能绘制到单个上下文中，不能在一秒钟内绘制。

有没有更快的方法在iPhone上绘制320条垂直渐变线（每条线都有1000个位置）？

是否有适用于iOS的硬件加速SurfaceView，可以快速绘制多个渐变？

//IPHONE - drawRect method
int totalNumberOfColors = 1000;
int i;
CGFloat *locations = malloc(totalNumberOfColors * sizeof locations[0]);
for (i = 0; i < totalNumberOfColors; i++) {
    float division = (float)1 / (float)(totalNumberOfColors - 1);
    locations[i] = i * division;
}
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGColorSpaceRef colorSpace  = CGColorSpaceCreateDeviceRGB();
for (int k = 0; k < 320; k++) {
    CGFloat * colorComponents = arrayOfFloatArrays[k];

    CGGradientRef gradient = CGGradientCreateWithColorComponents(
                                                                 colorSpace,
                                                                 colorComponents,
                                                                 locations,
                                                                 (size_t)(totalNumberOfColors));
    CGRect newRect;
    if (currentPositionOffset >=320) {
        newRect = CGRectMake(0, 0, 1, CGRectGetMaxY(rect));
    } else {
        newRect = CGRectMake(319 - (k * 1), 0, 1, CGRectGetMaxY(rect));
    }
    CGContextSaveGState(ctx);
    //NO CLIPPING STATE
    CGContextAddRect(ctx, newRect);
    CGContextClip(ctx);
    //CLIPPING STATE
    CGContextDrawLinearGradient(
                                ctx,
                                gradient,
                                CGPointMake(0, 0),
                                CGPointMake(0, CGRectGetMaxY(rect)),
                                (CGGradientDrawingOptions)NULL);


    CGContextRestoreGState(ctx);
    //RESTORE TO NO CLIPPING STATE
    CGGradientRelease(gradient);
}

//ANDROID - public void run() method on SurfaceView
for (i = 0; i < sonarData.arrayOfColorIntColumns.size() - currentPositionOffset; i++) {
    Paint paint = new Paint();
    int[] currentColors = sonarData.arrayOfColorIntColumns.get(currentPositionOffset + i);
    //Log.d("currentColors.toString()",currentColors.toString());
    LinearGradient linearGradient;
    if (currentScaleFactor > 1.0) {
        int numberOfColorsToUse = (int)(1000.0/currentScaleFactor);

        int tmpTopOffset = currentTopOffset;
        if (currentTopOffset + numberOfColorsToUse > 1000) {
            //shift tmpTopOffset
            tmpTopOffset = 1000 - numberOfColorsToUse - 1;
        }
        int[] subsetOfCurrentColors = new int[numberOfColorsToUse];
        System.arraycopy(currentColors, tmpTopOffset, subsetOfCurrentColors, 0, numberOfColorsToUse);
        linearGradient = new LinearGradient(0, tmpTopOffset, 0, getHeight(), subsetOfCurrentColors, null, Shader.TileMode.MIRROR);
        //Log.d("getHeight()","" + getHeight());
        //Log.d("subsetOfCurrentColors.length","" + subsetOfCurrentColors.length);
    } else {
        //use all colors
        linearGradient = new LinearGradient(0, 0, 0, getHeight(), currentColors, null, Shader.TileMode.MIRROR);
        //Log.d("getHeight()","" + getHeight());
        //Log.d("currentColors.length","" + currentColors.length);
    }
    paint.setShader(linearGradient);
    sonarData.checkAndAddPaint(paint);

    numberOfColumnsToDraw = i + 1;
}
//Log.d(TAG,"numberOfColumnsToDraw " + numberOfColumnsToDraw);
currentPositionOffset = currentPositionOffset + i;

if (currentPositionOffset >= sonarData.getMaxNumberOfColumns()) {
    currentPositionOffset = sonarData.getMaxNumberOfColumns() - 1;
}

if (numberOfColumnsToDraw > 0) {
    Canvas canvas = surfaceHolder.lockCanvas();
    if (AppInstanceData.sonarBackgroundImage != null && canvas != null) {
        canvas.drawBitmap(AppInstanceData.sonarBackgroundImage, 0, getHeight()- AppInstanceData.sonarBackgroundImage.getHeight(), null);
        if (cacheCanvas != null) {
            cacheCanvas.drawBitmap(AppInstanceData.sonarBackgroundImage, 0, getHeight()- AppInstanceData.sonarBackgroundImage.getHeight(), null);
        }

    }
    for (i = drawOffset; i < sizeToDraw + drawOffset; i++) {
        Paint p = sonarData.paintArray.get(i - dataStartOffset);
        p.setStrokeWidth(2);
        //Log.d("drawGradientLines", "canvas.getHeight() " + canvas.getHeight());
        canvas.drawLine(getWidth() - (i - drawOffset) * 2, 0, getWidth() - (i - drawOffset) * 2, canvas.getHeight(), p);

        if (cacheCanvas != null) {
            cacheCanvas.drawLine(getWidth() - (i - drawOffset) * 2, 0, getWidth() - (i - drawOffset) * 2, canvas.getHeight(), p);
        }

    }
    surfaceHolder.unlockCanvasAndPost(canvas);
}

Answer 1

对CG代码没有任何评论 - 自从我绘制了任何渐变以来已经有一段时间 - 但有几个注意事项：

你不应该在drawRect中这样做，因为它被调用很多。绘制成图像并显示它。
malloc没有匹配免费，所以你就像疯了一样泄漏记忆。

Answer 2

它将有一个学习曲线，但使用OpenGL ES 2.0实现这一点。我之前也采用了绘制大量渐变的东西，并使用OpenGL ES 2.0和自定义顶点和片段着色器重新实现了它。它比使用Core Graphics完成的等效绘图更快，所以你可能会看到一个很大的速度提升。

如果您还不知道任何OpenGL，我建议您在iOS上找到一些使用OpenGL ES 2.0（必须是2.0，因为它提供编写自定义着色器的能力）的教程，以学习基础知识。一旦你这样做，你应该能够显着提高你的绘图性能，远远高于Android版本，也许是激励Android版本也使用OpenGL。

如何快速绘制许多渐变线

2 个答案: