处理是当今可用的功能最强大的库之一,可用于创建2D和3D视觉算法作品。 它是基于Java的开放源代码,并具有各种各样的功能,这些功能旨在使绘画和绘画变得既有趣又容易。

通过在Android应用中使用Processing的核心库,您可以创建高性能的图形和动画,而无需处理Android的OpenGL或Canvas API。 通常,您甚至不必费心处理低级任务,例如管理线程,创建渲染循环或保持帧速率。

在本教程中,我将向您展示如何将Processing添加到Android应用中,并向您介绍其一些最有用的功能。

1.项目设置

Processing带有自己的集成开发环境,可用于创建Android应用。 但是,如果您已经是Android应用程序开发人员,那么我确定您希望使用Android Studio。 因此,继续下载最新版本的Processing的Android模式

在下载的ZIP文件中,您会找到一个名为processing-core.zip的文件。 使用命令行或操作系统的文件资源管理器将其解压缩并重命名为processing-core.jar

最后,通过将JAR文件放置在app模块的libs文件夹中,将其添加为Android Studio项目的依赖项之一。

现在,您拥有了开始使用处理所需的一切。

2.创建画布

Processing的几乎所有核心功能都可以通过PApplet类使用,该类实际上是可以绘制的画布。 通过扩展它,您可以轻松访问它必须提供的所有方法。

val myCanvas = object: PApplet() {
    // More code here
}

要配置画布,必须重写其settings()方法。 在该方法内部,您可以指定两个重要的配置详细信息:画布的所需尺寸以及它应使用2D还是3D渲染引擎。 现在,让我们使画布与设备的屏幕一样大,并使用默认的2D渲染引擎。 为此,您可以调用fullScreen()快捷方法。

override fun settings() {
    fullScreen()
}

settings()方法是一种特殊的方法,仅当您不使用Processing自己的IDE时才需要。 我建议您不要再添加任何代码。

如果要初始化任何变量或更改任何与绘图相关的参数(例如画布的背景颜色或每秒应显示的帧数),则应改用setup()方法。 例如,以下代码向您展示如何使用background()方法将画布的背景色更改为红色:

override fun setup() {
    background(Color.parseColor("#FF8A80")) // Material Red A100
}

3.显示画布

由于画布仍不属于任何活动的一部分,因此您在运行应用程序时将无法看到它。 要显示画布,您必须首先在活动的布局XML文件中为其创建一个容器。 可以将LinearLayout小部件或FrameLayout小部件作为容器。

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/canvas_container">
    
</FrameLayout>

PApplet实例不能直接添加到您创建的容器中。 你必须将其放在里面PFragment初审,然后调用setView()的方法PFragment实例,它与容器关联。 以下代码显示了如何执行此操作:

// Place canvas inside fragment
val myFragment = PFragment(myCanvas)

// Display fragment
myFragment.setView(canvas_container, this)

此时,如果您运行该应用程序,则应该能够看到覆盖整个设备屏幕的空白画布。



Android Glide 填充 android studio容器填充_android


4.绘制简单的形状

现在您已经可以看到画布了,让我们开始绘制。 要在画布内绘制,必须重写您先前创建的PApplet子类的draw()方法。

override fun draw() {
    // More code here
}

可能不会立即发现,但是在默认情况下,Processing会尝试每秒调用一次draw()方法多达60次,只要显示的是画布即可。 这意味着您可以使用它轻松创建静止图形和动画。

处理具有多种直观命名的方法,这些方法使您可以绘制几何图元,例如点,线,椭圆和矩形。 例如, rect()方法绘制一个矩形,而ellipse()方法绘制一个椭圆。 rect()ellipse()方法都需要类似的参数:形状的X和Y坐标,宽度和高度。

以下代码显示了如何绘制矩形和椭圆形:

rect(100f, 100f, 500f, 300f) // Top-left corner is at (100,100)
ellipse(350f, 650f, 500f, 400f) // Center is at (350,650)

许多方法也过载,允许您稍微修改基本形状。 例如,通过将第五个参数传递到rect()方法(角半径),可以绘制一个圆角矩形。

rect(100f, 900f, 500f, 300f, 100f) // Corner radius of 100 pixels

如果现在运行您的应用程序,应该会看到类似以下内容:



Android Glide 填充 android studio容器填充_java_02


如果要更改形状的边框颜色,可以调用stroke()方法并将所需的颜色作为参数传递给它。 同样,如果要用特定颜色填充形状,则可以调用fill()方法。 在实际绘制形状之前,应同时调用这两种方法。

以下代码绘制带有绿色轮廓的蓝色三角形:

stroke(Color.GREEN)
fill(Color.BLUE)
triangle(100f, 1600f, 300f, 1300f, 500f, 1600f)

如果现在运行您的应用程序,您将能够看到蓝色三角形,但是您还会注意到所有其他形状也都变为蓝色。



Android Glide 填充 android studio容器填充_android_03


如果原因尚不明确,请记住重复调用draw()方法。 这意味着您在绘制周期中更改的任何配置参数都会对后续绘制周期产生影响。 因此,为了确保所有形状均以正确的颜色绘制,最好始终在绘制之前始终明确指定所绘制每个形状的颜色。

例如,通过在draw()方法的开头添加以下代码,可以使其他形状再次变为白色。

// Set the fill and stroke to white and black
// before drawing the rectangles and ellipses
stroke(Color.BLACK)
fill(Color.WHITE)

此时,画布将如下所示:



Android Glide 填充 android studio容器填充_python_04


5.处理触摸事件

通过处理,处理触摸事件非常容易。 您不需要任何事件处理程序。 您需要做的就是检查名为mousePressed的布尔变量mousePressed为true,以了解用户何时触摸屏幕。 确认用户正在触摸屏幕后,就可以使用mouseXmouseY变量确定触摸的X和Y坐标。

例如,以下代码在用户触摸画布的任何地方绘制一个新的矩形。

// Check if user is touching the canvas
if(mousePressed) {
    // Specify fill and stroke colors
    stroke(Color.RED)
    fill(Color.YELLOW)
    
    // Draw rectangle
    rect(mouseX.toFloat(), mouseY.toFloat(), 100f, 100f)
}

如果您现在运行应用程序并在屏幕上拖动手指,则应该看到绘制了许多黄色矩形。



Android Glide 填充 android studio容器填充_java_05


在我们继续之前,这里有个快速提示:如果您希望在任何时候清除画布,则可以再次简单地调用background()方法。

background(Color.parseColor("#FF8A80")) // Material Red A100

6.处理像素

到目前为止,您只能使用简单的原语。 如果您对创建复杂而复杂的艺术品感兴趣,则可能需要访问画布的各个像素。

通过调用loadPixels()方法,可以将画布的所有像素的颜色加载到名为pixels的数组中。 通过修改数组的内容,您可以非常有效地修改画布的内容。 最后,完成数组修改后,您应该记住要调用updatePixels()方法来呈现新的像素集。

请注意, pixels数组是一维整数数组,其大小等于画布的宽度和高度的乘积。 由于画布是二维的,因此将像素的X和Y坐标转换为数组的有效索引需要使用以下公式:

// index = xCoordinate + yCoordinate * widthOfCanvas

以下示例代码根据其X和Y坐标设置画布上每个像素的颜色,应该可以帮助您更好地了解如何使用pixels数组:

override fun draw() {
    loadPixels() // Load array

    // loop through all valid coordinates
    for(y in 0..height - 1) {
        for(x in 0..width - 1) {

           // Calculate index
           val index = x + y * width

           // Update pixel at index with a new color
           pixels[index] = Color.rgb(x % 255, y % 255, (x*y) % 255)
        }
    }

    // Render pixels with new colors
    updatePixels()
}

您在上面看到的Color.rgb()方法将各个红色,绿色和蓝色值转换为表示Processing框架可以理解的单个颜色值的整数。 随意修改传递给它的参数,但要确保它们始终在0到255的范围内。

如果选择运行代码而不进行任何修改,则应该看到如下所示的模式:



Android Glide 填充 android studio容器填充_java_06


结论

现在,您知道如何使用处理语言创建2D图形。 借助您今天所学的技能,您不仅可以使您的Android应用更具吸引力,还可以从头开始创建功能完善的游戏。 您仅受您的创造力的限制!

要了解有关处理的更多信息,建议您花一些时间浏览官方参考页

翻译自: https://code.tutsplus.com/tutorials/getting-started-with-processing-for-android--cms-30419