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
分享到:
相关推荐
原生JavaScript+canvas实现图片裁剪功能,介绍css属性clip
该控件封装了Canvas的裁剪图片的功能,实现了PC端移动端拖动裁剪功能,移动端手势放大缩小功能进行裁剪,已添加好事件,剩下在事件中修改配置属性Scale的事即可实现
微信小程序源码,完整实现图片裁剪功能。 可以自由拖动裁剪框和手动调整裁剪尺寸,实时显示裁剪尺寸大小,准确完成图片裁剪功能,并且能够恢复原始图片,不会丢失原图。 提供完整源码,能够直接在小程序里正常运行,...
主要介绍了微信小程序简单的canvas裁剪图片功能详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
Region.Op.DIFFERENCE 显示第一次不同于第二次的部分 Region.Op.REVERSE_DIFFERENCE 显示第二次不同于第一次的部分 Region.Op.REPLACE 显示第二次的部分 Region.Op.UNION 显示第一次和第二次的所有部分(并集) ...
实现:tkinter 画布上显示图片,按下鼠标左键并且移动,实现截图 代码如下 # -*- encoding=utf-8 -*- import os import tkinter as tk from PIL import Image from PIL import ImageTk left_mouse_down_x = 0 ...
1.canvas上传图片base64-有裁剪功能-Jcrop.js 2.3.可以设置是否-上传图片大小,limitImg = true 3.4.可以设置是否-有裁剪图片大小条件,limitImg = true,可手动更改 可预览图片地址 ...
上次我们介绍过一款基于HTML5的图片马赛克效果,今天我们要来介绍一款基于jQuery的图片裁剪插件,这款jQuery图片裁剪插件可以选择裁剪框的尺寸比例,可以设置高宽尺寸,同时可以设置图片翻转角度,当然也支持图片的...
1.核心功能 此组件功能包含: 图片裁剪(裁剪框拖动,裁剪框改变大小); 图片马赛克(绘制马赛克,清除马赛克); 图片预览、图片还原(返回原图、返回处理图); 图片上传(获取签名、上传图片)。 2....
Canvas 提供了合成与裁剪功能,可以通过设置 globalCompositeOperation 属性来实现不同的合成效果,还可以通过设置裁剪路径来实现裁剪功能。 总结 Canvas 是一个功能强大且轻量级的画布,适合用于绘制图形、动画、...
images-tools 基于 node-canvas、node-images 实现对图片的一些操作,包括放大、缩小、压缩、修改画布大小等。 功能 resize.js -> 修改图片画布大小 ...apis/frameAnimation.js -> node-canvas 裁剪图片,生成圆角图片
Javascript 前端实现图片裁剪功能,能实时展示最新图片、 预览新图片。 任意拖动图片,八个方向缩放图片,任意寸尺大小的裁剪,满足基本图片裁剪需求。 使用canvas进行图片裁剪数据的处理,简单原始代码,易学易懂,...
使用Canvas绘制图像的时候,我们经常会想要只保留图像的一部分,这是我们可以使用canvas API再带的图像裁剪功能来实现这一想法。Canvas API的图像裁剪功能是指,在画布内使用路径,只绘制该路径内所包含区域的图像,...
使用微信小程序Canvas组件,编辑裁剪图片到合适的大小;微信小程序编辑器直接打开example预览效果
演示地址 https://my729.github.io/picture-crop-demo/dist/#/ 前言 ...使用 cropperjs插件 和 原生canvas 两种方式实现图片裁剪功能 使用cropperjs插件 安装cropperjs yarn install cropperjs 初始
微信小程序canvas,可在小程序内编辑图片。canvas 实现图片拉伸、压缩与裁剪。功能比较简单。
一个html5头像上传组件,其中有裁剪功能,利用canvas进行预览,后台为jsp
我的想法是,随机生成图片,随机生成位置,再用canvas裁剪出滑块和背景图。下面介绍具体步骤。 首先随便找一张图片渲染到canvas上,这里#canvas作为画布,#block作为裁剪出来的小滑块。 <canvas width=310 height=...
本版本,使用cropper.js+hammer.js 实现手势旋转拖拽放大缩小图片功能,在截取图片时 清晰度远远大于jcanvas版本.有截取框,点击截取canvas bug 设置截取框cropbox的高度 不能大于图片高度,不知道新版的croppper.js...