基于canvas画布,Android图片编辑库,实现的一款图片轻量级编辑框架,目前支持涂鸦、马赛克、剪裁、文字等功能,支持Android11

废话不多说,直接上图

 

使用

allprojects {
		repositories {
			...
			maven { url 'https://jitpack.io' }
		}
	}
dependencies {
	        implementation 'com.github.OneZeroYang:EditImage:1.1.0'
	}

 

详细使用方法见github

 

原理

代码细节我就不体现了,直接说点核心吧,大家都知道,可以通过Canvas绘制view
先创建一个Bitmap
  val bitmap = Bitmap.createBitmap(
    Math.round(frame.width()),
    Math.round(frame.height()), Bitmap.Config.ARGB_8888
    )
在创建一个Canvas 并传入这个 Bitmap
 val canvas = Canvas(bitmap)
我们拿到canvas,就可以像绘制自定义view一样得去绘制Bitmap,最后我们再将这个Bitmap返回,就可以得到我们编辑好的图片,至于怎么去绘制自定义view,我相信网上都是烂大街了,那我就简单得讲讲:

涂鸦

我们在开发自定义view的时候,相信大家都知道有个东西叫path,他可以绘制路径,我们在触摸屏幕的时候,会触发onTouchEvent,这个时候我们就可以获取到相应的时间,从而的到路径,这不就绘制出来了吗?马赛克也是同样的道理,只是设置了不同的画笔风格而已,不在赘复。

剪裁、旋转

我们可以在图片的上层绘制一个剪裁框,完全可以通过计算,来确实用户得到用户选择的一些相关参数,例如位置,大小,最后通过矩阵进行相关的剪裁就好,旋转也是有相关api的,不要问我怎么用,我只能告诉你,谷歌官方文档真好用。

 

箭头
​​​​​​


文字我就不说了,往自定义控件里面add一个view或者直接add一个TextView,箭头我是通过path来实现的,我们可以根据两个手指之间的距离,来得到箭头的长度、方向(角度)

直接上图吧

(图来源于网络哈)

 

 

 

 

  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
基于 canvas图片编辑是一种使用 HTML5 技术的图形编辑工具,它可以在网页上绘制、修改和编辑图片。其中包括添加箭头和文字功能。 首先,我们可以使用 canvas 绘制一个图像,通过 JavaScript 代码将其加载到网页上。然后,通过 canvas 的绘制 API,我们可以在图像上绘制箭头。 绘制箭头的步骤如下: 1. 确定箭头的起始点和结束点的坐标。 可以使用鼠标事件获取用户在图像上点击的位置,作为箭头的起始点。还可以使用 JavaScript 计算和设置箭头的结束点坐标。 2. 绘制箭头的线段。 使用 canvas 的线段绘制 API,从起始点绘制一条线段到结束点。 3. 绘制箭头的箭头头部。 箭头的头部可以通过绘制一个三角形来实现。根据箭头线段的角度和长度,使用路径绘制 API 绘制一个三角形,并填充为箭头的颜色。 除了绘制箭头,我们还可以在 canvas 上添加文字。这可以通过以下步骤实现: 1. 确定文字的起始点坐标。 同样,可以通过鼠标事件或 JavaScript 确定文字的位置。 2. 设置文字样式。 使用 canvas 的字体和文本样式 API,可以设置文字的字体、大小、颜色等样式。 3. 绘制文字。 使用 canvas 的文本绘制 API,在指定的位置绘制文字。 总的来说,基于 canvas图片编辑可以让用户在网页上绘制箭头并添加文字。这个功能可以应用于图片标注、图形设计等各种场景,为用户提供了更多的编辑和创造空间。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值