`
ipjmc
  • 浏览: 708104 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Canvas的裁剪功能

阅读更多
    Canvas提供了ClipPath, ClipRect, ClipRegion 等方法来裁剪,通过Path, Rect ,Region 的不同组合,Android几乎可以支持任意现状的裁剪区域。

    android.graphics包中定义了Point, Rect, Path, Region 这几种几何形状,Path可以为有圆弧,椭圆,二次曲线,三次曲线,线段,矩形等基本几何图形或是由这些基本几何图形组合而成,Path可以为开放或是闭合曲线。Rect提供了定义矩形的简洁方法。Region则支持通过区域的“加”,“减”,“并”,“异或”等逻辑运算由多个Region组合而成。Region.Op定义了Region支持的区域间运算种类。

    Clipping 介绍有Region运算来为Canvs定义剪裁区域后,同一幅图最后显示的效果。canvas.save();和canvas.restore();用于保存和恢复Canvas的状态属性。

    drawScene定义了绘图的内容:一条红线,一个绿圆,和“Clipping”文字。


private void drawScene(Canvas canvas) {
	canvas.clipRect(0, 0, 100, 100);
	
	canvas.drawColor(Color.WHITE);
 
	mPaint.setColor(Color.RED);
	canvas.drawLine(0, 0, 100, 100, mPaint);
 
	mPaint.setColor(Color.GREEN);
	canvas.drawCircle(30, 70, 30, mPaint);
 
	mPaint.setColor(Color.BLUE);
	canvas.drawText("Clipping", 100, 30, mPaint);
}


剪裁区域为两个矩形相减:
canvas.save();
canvas.translate(160, 10);
canvas.clipRect(10, 10, 90, 90);
canvas.clipRect(30, 30, 70, 70, Region.Op.DIFFERENCE);
drawScene(canvas);
canvas.restore();

剪裁区域为一个圆:
canvas.save();
canvas.translate(10, 160);
mPath.reset();
canvas.clipPath(mPath); // makes the clip empty
mPath.addCircle(50, 50, 50, Path.Direction.CCW);
canvas.clipPath(mPath, Region.Op.REPLACE);
drawScene(canvas);
canvas.restore();


剪裁区域为两个矩形的并集:
canvas.save();
canvas.translate(160, 160);
canvas.clipRect(0, 0, 60, 60);
canvas.clipRect(40, 40, 100, 100, Region.Op.UNION);
drawScene(canvas);
canvas.restore();


剪裁区域为两个矩形的异或集:
canvas.save();
canvas.translate(10, 310);
canvas.clipRect(0, 0, 60, 60);
canvas.clipRect(40, 40, 100, 100, Region.Op.XOR);
drawScene(canvas);
canvas.restore();


最后一个为两个矩形的逆向差集:
canvas.save();
canvas.translate(160, 310);
canvas.clipRect(0, 0, 60, 60);
canvas.clipRect(40, 40, 100, 100,
Region.Op.REVERSE_DIFFERENCE);
drawScene(canvas);
canvas.restore();


效果图片:
  • 大小: 20 KB
分享到:
评论
2 楼 ipjmc 2012-09-16  
lansuiyun 写道
有个地方不太明白,能不能解答一下。
Region.Op 是对几个clip区域起作用的。几个例子都是,先定义一个裁剪区域,然后再定义一个裁剪区域以及Region.Op ,但是在drawScene又创建了一裁剪区域。我的问题是Region.Op 是对前两个前作用吗,还是说对3个都起作用。

如果有三次操作分别是a,b,c,最后的结果是(a OP b) OP c。第三次会在前两次OP的结果上进行,你可以自己写一个例子验证一下。
1 楼 lansuiyun 2012-09-13  
有个地方不太明白,能不能解答一下。
Region.Op 是对几个clip区域起作用的。几个例子都是,先定义一个裁剪区域,然后再定义一个裁剪区域以及Region.Op ,但是在drawScene又创建了一裁剪区域。我的问题是Region.Op 是对前两个前作用吗,还是说对3个都起作用。

相关推荐

    canvas裁剪

    "canvas裁剪"是Canvas API中的一个重要功能,它允许开发者选取图像的一部分并进行操作,例如保存、显示或者进一步处理。在本文中,我们将深入探讨Canvas裁剪的原理、方法和实际应用。 首先,裁剪Canvas的基础在于`...

    原生js+canvas实现图片裁剪

    在本文中,我们将深入探讨如何使用原生JavaScript和HTML5的canvas元素来实现图片裁剪功能。canvas作为HTML5的一项重要特性,为开发者提供了在网页上进行动态图形绘制的能力,而图片裁剪则是其常见的应用之一。 首先...

    HTML5 canvas 图片裁剪 图片裁切

    在实现九宫格裁剪功能时,开发者可能使用了以下步骤: 1. **加载图片**:使用`new Image()`创建一个图像对象,设置其`src`属性为图片URL,然后监听`onload`事件,确保图片加载完成后才进行下一步操作。 2. **创建...

    使用HTML5 canvas 标签进行图片裁剪、旋转、缩放示例代码

    在这个示例中,我们将深入探讨如何利用canvas进行图片的裁剪、旋转和缩放操作。 首先,我们需要在HTML文件中创建一个canvas元素,并通过JavaScript获取到这个元素的2D渲染上下文。在HTML部分,可以这样设置: ```...

    微信小程序简单的canvas裁剪图片功能详解

    微信小程序的canvas裁剪图片功能可以让开发者在小程序中实现图片的裁剪操作,适用于需要图片处理的各种场景,比如用户头像编辑、图片分享等。在微信小程序中,Canvas API提供了丰富的绘图接口,可以帮助开发者绘制...

    微信小程序 图片裁剪功能 (完整源码)

    微信小程序源码,完整实现图片裁剪功能。 可以自由拖动裁剪框和手动调整裁剪尺寸,实时显示裁剪尺寸大小,准确完成图片裁剪功能,并且能够恢复原始图片,不会丢失原图。 提供完整源码,能够直接在小程序里正常运行,...

    Canvas仿微信照片裁剪功能

    在开发Web应用时,有时我们需要实现类似微信的照片裁剪功能,让用户可以自由调整选取的图片区域。本项目正是一个基于Canvas技术实现的仿微信照片裁剪控件,它提供了PC端和移动端的交互体验,包括拖动裁剪、手势放大...

    基于cropperjs和canvas实现的图片裁剪

    在现代Web应用中,图片...通过学习和理解这些代码,你可以更好地掌握`Cropper.js`和`Canvas`的使用方法,从而在自己的项目中实现图片裁剪功能。记得根据实际需求调整配置选项和代码逻辑,以满足特定场景下的功能要求。

    html5+canvas+js头像缩放裁剪

    JavaScript作为客户端脚本语言,与HTML5和Canvas结合,可以创建出丰富的交互式用户界面,包括图像处理功能,如头像的缩放和裁剪。 头像缩放裁剪是常见的用户上传头像时的需求,用户可以选择并调整图片大小,裁剪为...

    daycaca一款基于canvas图片处理类库它可以帮助你处理图片的压缩裁剪等

    Daycaca是一款强大的JavaScript图片处理类库,它充分利用HTML5中的Canvas元素,为开发者提供了便捷的图片压缩和裁剪功能。在Web开发中,尤其是在用户上传图片或者需要进行实时图片处理的场景下,Daycaca扮演着至关...

    vue下canvas裁剪图片实例讲解

    总之,在Vue中实现canvas裁剪图片涉及了HTML、CSS和JavaScript的结合使用,理解并掌握canvas的绘图机制是实现这个功能的关键。通过以上步骤,你可以创建一个自定义的图片裁剪组件,灵活地应用到Vue项目中。在实际...

    android_canvas的裁剪功能

    Region.Op.DIFFERENCE 显示第一次不同于第二次的部分 Region.Op.REVERSE_DIFFERENCE 显示第二次不同于第一次的部分 Region.Op.REPLACE 显示第二次的部分 Region.Op.UNION 显示第一次和第二次的所有部分(并集) ...

    微信小程序头像裁剪功能

    本文将详细讲解如何在微信小程序中实现头像裁剪功能。 首先,我们要知道,微信小程序提供了`wx.chooseImage`接口用于从本地相册或相机选取图片。这个接口返回一个临时文件路径,我们可以用这个路径作为裁剪操作的...

    Python基于tkinter canvas实现图片裁剪功能

    实现:tkinter 画布上显示图片,按下鼠标左键并且移动,实现截图 代码如下 # -*- encoding=utf-8 -*- import os import tkinter as tk from PIL import Image from PIL import ImageTk left_mouse_down_x = 0 ...

    Android 实现QQ圆形图片裁剪功能

    在Android开发中,有时我们需要实现特定的图片裁剪功能,比如QQ圆形图片裁剪,这在社交应用或者个性化设置中非常常见。QQ圆形图片裁剪功能主要是为了将用户选择的矩形图片转换为圆形,以达到类似QQ头像的效果。下面...

    HTML5实现图片裁剪功能.zip

    在图片裁剪功能中,File API的`FileReader`对象用于读取用户选择的图片文件,`FileReader`的`readAsDataURL()`方法可以把文件内容读取为一个数据URL,这个URL可以作为Canvas的`drawImage()`方法的参数。 实现HTML5...

    canvas上传图片base64-有裁剪功能-Jcrop.js

    1.canvas上传图片base64-有裁剪功能-Jcrop.js 2.3.可以设置是否-上传图片大小,limitImg = true 3.4.可以设置是否-有裁剪图片大小条件,limitImg = true,可手动更改 可预览图片地址 ...

    图片裁剪功能实现

    在IT领域,图片裁剪功能是一项常见的图像处理技术,它被广泛应用于各种应用程序,如社交媒体、图像编辑软件、在线设计工具等。实现这个功能需要掌握一些核心的技术和知识点,包括图像处理理论、编程语言和相应的库。...

    canvas图像裁剪压缩旋转

    "canvas图像裁剪压缩旋转"这个主题涵盖了多个关键知识点,包括图片裁剪、缩放、滤镜应用以及旋转,这些都是实现动态图像操作的重要技术。下面将详细讲解这些知识点。 1. 图像裁剪: 使用HTML5的Canvas API,可以...

Global site tag (gtag.js) - Google Analytics