`
ipjmc
  • 浏览: 704079 次
  • 性别: 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个都起作用。

相关推荐

    原生js+canvas实现图片裁剪

    原生JavaScript+canvas实现图片裁剪功能,介绍css属性clip

    Canvas仿微信照片裁剪功能

    该控件封装了Canvas的裁剪图片的功能,实现了PC端移动端拖动裁剪功能,移动端手势放大缩小功能进行裁剪,已添加好事件,剩下在事件中修改配置属性Scale的事即可实现

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

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

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

    主要介绍了微信小程序简单的canvas裁剪图片功能详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

    android_canvas的裁剪功能

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

    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 ...

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

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

    jQuery图片裁剪插件 功能非常强大

    上次我们介绍过一款基于HTML5的图片马赛克效果,今天我们要来介绍一款基于jQuery的图片裁剪插件,这款jQuery图片裁剪插件可以选择裁剪框的尺寸比例,可以设置高宽尺寸,同时可以设置图片翻转角度,当然也支持图片的...

    基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能

    1.核心功能  此组件功能包含:  图片裁剪(裁剪框拖动,裁剪框改变大小);  图片马赛克(绘制马赛克,清除马赛克);  图片预览、图片还原(返回原图、返回处理图);  图片上传(获取签名、上传图片)。 2....

    canvas基础简单易懂教程(完结,多图).doc

    Canvas 提供了合成与裁剪功能,可以通过设置 globalCompositeOperation 属性来实现不同的合成效果,还可以通过设置裁剪路径来实现裁剪功能。 总结 Canvas 是一个功能强大且轻量级的画布,适合用于绘制图形、动画、...

    images-tools:基于 node-canvas 和 node-images 实现批量修改图片大小、画布大小、图片拼合、压缩、裁剪等功能

    images-tools 基于 node-canvas、node-images 实现对图片的一些操作,包括放大、缩小、压缩、修改画布大小等。 功能 resize.js -> 修改图片画布大小 ...apis/frameAnimation.js -> node-canvas 裁剪图片,生成圆角图片

    JS前端图片裁剪功能(完整详细代码)

    Javascript 前端实现图片裁剪功能,能实时展示最新图片、 预览新图片。 任意拖动图片,八个方向缩放图片,任意寸尺大小的裁剪,满足基本图片裁剪需求。 使用canvas进行图片裁剪数据的处理,简单原始代码,易学易懂,...

    使用HTML5 Canvas API中的clip()方法裁剪区域图像

    使用Canvas绘制图像的时候,我们经常会想要只保留图像的一部分,这是我们可以使用canvas API再带的图像裁剪功能来实现这一想法。Canvas API的图像裁剪功能是指,在画布内使用路径,只绘制该路径内所包含区域的图像,...

    微信小程序裁剪图片Demo

    使用微信小程序Canvas组件,编辑裁剪图片到合适的大小;微信小程序编辑器直接打开example预览效果

    详解vue项目中实现图片裁剪功能

    演示地址 https://my729.github.io/picture-crop-demo/dist/#/ 前言 ...使用 cropperjs插件 和 原生canvas 两种方式实现图片裁剪功能 使用cropperjs插件 安装cropperjs yarn install cropperjs 初始

    wxa-comp-canvas-drag-master.zip

    微信小程序canvas,可在小程序内编辑图片。canvas 实现图片拉伸、压缩与裁剪。功能比较简单。

    html5+jsp图片裁剪上传

    一个html5头像上传组件,其中有裁剪功能,利用canvas进行预览,后台为jsp

    js+canvas实现滑动拼图验证码功能

    我的想法是,随机生成图片,随机生成位置,再用canvas裁剪出滑块和背景图。下面介绍具体步骤。 首先随便找一张图片渲染到canvas上,这里#canvas作为画布,#block作为裁剪出来的小滑块。 <canvas width=310 height=...

    canvas 手势拖拽旋转放大 crop截取图片 头像上传高清版本 (Tomcat 测试)

    本版本,使用cropper.js+hammer.js 实现手势旋转拖拽放大缩小图片功能,在截取图片时 清晰度远远大于jcanvas版本.有截取框,点击截取canvas bug 设置截取框cropbox的高度 不能大于图片高度,不知道新版的croppper.js...

Global site tag (gtag.js) - Google Analytics