首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

android画布如何缩放和居中矩形

Android画布可以通过Matrix类来实现缩放和居中矩形的效果。下面是一个完善且全面的答案:

在Android中,画布(Canvas)是用于绘制图形和文字的基本工具。要实现缩放和居中矩形的效果,可以通过以下步骤来操作:

  1. 创建一个Matrix对象,用于进行画布的变换操作。
  2. 计算缩放比例。可以根据需要的缩放比例来计算,比如将画布缩放到原来的一半,可以使用Matrix的setScale方法来设置缩放比例。
  3. 计算平移距离。为了使矩形居中,需要计算平移的距离。可以通过获取画布的宽度和高度,以及矩形的宽度和高度,来计算平移的距离。
  4. 设置Matrix的缩放和平移操作。使用Matrix的setScale和postTranslate方法来设置缩放和平移操作。
  5. 将Matrix应用到画布上。使用Canvas的concat方法将Matrix应用到画布上,这样后续的绘制操作就会按照Matrix的变换进行。

下面是一个示例代码,演示如何实现缩放和居中矩形的效果:

代码语言:txt
复制
// 创建Matrix对象
Matrix matrix = new Matrix();

// 计算缩放比例
float scale = 0.5f; // 缩放到原来的一半
matrix.setScale(scale, scale);

// 计算平移距离
int canvasWidth = canvas.getWidth();
int canvasHeight = canvas.getHeight();
int rectWidth = 200; // 矩形的宽度
int rectHeight = 100; // 矩形的高度
float translateX = (canvasWidth - rectWidth * scale) / 2;
float translateY = (canvasHeight - rectHeight * scale) / 2;
matrix.postTranslate(translateX, translateY);

// 应用Matrix到画布上
canvas.concat(matrix);

// 绘制矩形
Rect rect = new Rect(0, 0, rectWidth, rectHeight);
canvas.drawRect(rect, paint);

这样,就实现了将矩形缩放到原来的一半,并居中绘制在画布上的效果。

推荐的腾讯云相关产品:腾讯云移动应用分析(MTA),该产品可以帮助开发者分析和监控移动应用的用户行为和性能数据,提供丰富的数据分析和可视化报表,帮助开发者优化应用性能和用户体验。产品介绍链接地址:https://cloud.tencent.com/product/mta

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Android UI】Canvas 画布 ⑦ ( Canvas 绘制显示区域 | Canvas 绘制矩形源码分析 )

文章目录 一、Canvas 绘制显示区域 二、Canvas 绘制矩形源码分析 Canvas 状态保存机制 中 , 存在两个栈结构 , 分别是 状态栈 图层栈 ; 其中 图层栈 又称为 Layer 栈...; Canvas 画布中 , 有 2 套坐标系 , 分别是 : Canvas 自身坐标系 Canvas 绘图坐标系 一、Canvas 绘制显示区域 ---- Canvas 绘制时 , 并不是由 Canvas...状态栈 中 最外层的坐标系 , 组件一旦创建成功 , 该坐标系是不会改变的 ; Canvas 自身坐标系是在 绘制流程中 ViewRootImpl#draw 方法中确定的 , 是无法改变的 ; 参考 【Android...绘图坐标系 是 当前要绘制的图像 所在的 坐标系 , 该 绘图坐标系 表示具体绘制的元素要画到哪个位置 , 该 绘图坐标系 是通过对 Canvas 自身坐标系 进行若干次的 平移 , 旋转 , 缩放..., 之后所有的绘制内容只能显示这个画布范围内的元素 , 画出边界的元素是不显示的 ; 如下图 , 蓝色矩形框是 Canvas 自身坐标系 , 红色矩形框是 Canvas 绘图坐标系 , 两个坐标系重合部分

1.5K10

Fabric.js 居中元素 🎗️

(也是分基于视窗或基于画布的) 除此之外,还总结了 在画布层面居中指定元素 元素自身调用居中方法 。...添加一个矩形,之后要居中的对象就是它了。 添加鼠标滚轮滚动时缩放画布(方便演示 基于视窗 基于画布 的区别)。 添加鼠标拖拽画布平移位置(方便演示 基于视窗 基于画布 的区别)。...canvas.isDragging = false }) 复制代码 代码有点多,但 滚轮滚动时可修改画布缩放等级 拖拽画布 部分其实可以不要的,写上这些代码主要是为了方便演示...我直接上图来解释一下什么是 根据视窗水平居中元素 缩放的情况 移动画布的情况 在缩放移动画布之后,canvas.viewportCenterObjectH rect.viewportCenterH...基于画布 // 省略部分代码 canvas.centerObjectH(rect) // 元素自己根据画布进行居中 // rect.centerH() 复制代码 缩放的情况 移动画布的情况 可以

3.6K20

图形编辑器开发:缩放至适应画布

之前我们实现了画布缩放的功能,本文来讲讲如何让内容缩放至适应画布大小(Zoom to fit)。 我们看看效果。...newZoom = vh / bbox.height; } else { // 基于宽 newZoom = vw / bbox.width; } 然后就是 小矩形在大矩形下垂直水平居中...思路是,计算 newZoom 时用的 vw vh,在原来的基础减去 padding,再去计算。 需要注意的是,后面计算居中时,还是要要用原来的 viewport.x viewport.y。...基本上都逃不出 contain 填充策略,居中对齐算法,把它们弄懂了,缩放功能基本就没啥问题了。 我是前端西瓜哥,欢迎关注我,学习开发一个图形设计工具。...相关阅读, 图形编辑器开发:以光标为中心缩放画布 图形编辑器:场景坐标、视口坐标以及它们之间的转换 图形编辑器开发:最基础但却复杂的选择工具 图形编辑器:工具管理切换 图形编辑器:底层设计

26030

Android自定义View实现可拖拽缩放矩形

本文实例为大家分享了Android自定义View拖拽缩放矩形框的具体代码,供大家参考,具体内容如下 在开发项目中,需要一个矩形框来实现截屏功能,并且还需要可以任意拖拽缩放,这就需要自定义View来实现了...extends View { // 绘制 损害框损害名称 private Paint mPaint; private RectF mRectF; // 边缘字体 // private BorderedText...EDGE_WIDTH, startY - EDGE_WIDTH, endX + EDGE_WIDTH, endY + EDGE_WIDTH, mPaint);/*right |*/ // 绘制名称 ...getResources().getColor(R.color.orange)); postInvalidate(); break; default: break; } return true; } /*点击顶点附近时的缩放处理...) private void drawRect(Canvas canvas) { canvas.drawRect(mRectF, mPaint); // 绘制名称 概率 // final String

1.7K41

Carson带你学Android:自定义View Canvas类使用教程

绘制矩形(drawRect) 原理:矩形的对角线顶点确定一个矩形 一般是采用左上角右下角的两个点的坐标。...,圆角矩形多了两个参数rx ry 圆角矩形的角是椭圆的圆弧,rx ry实际上是椭圆的两个半径,如下图: 特别注意:当 rx大于宽度的一半, ry大于高度一半 时,画出来的为椭圆 实际上,在rx...绘制椭圆 原理:矩形的对角线顶点确定矩形,根据传入矩形的长宽作为长轴短轴画椭圆 椭圆传入的参数矩形是一样的; 绘制椭圆实际上是绘制一个矩形的内切图形。...py) public final void scale (float sx, float sy, float px, float py) 我将用下面的例子说明缩放的使用缩放中心的意义。...// 绘制放大1.5倍后的蓝色矩形(红色) canvas.drawRect(rect,mPaint2); // 缩放的本质是:把形状先画到画布,然后再缩小

2.3K10

Android 图形处理 —— Matirx 方法详解及应用场景

dst 中,返回值是判断矩形经过变换后是否仍为矩形 void mapVectors(float[] dst, float[] src) mapPoinst、mapRect 类似,这里测试计算的是向量...,然而在大多数的情况下,源矩形目标矩形的长宽比是不一致的,到底该如何填充呢,这个填充的模式就由第三个参数 stf 来确定 ScaleToFit 是一个枚举类型,共包含了四种模式: 模式 效果 CENTER...居中,对 src 等比例缩放,并最大限度的填充变换后的矩形,将其居中放置在 dst 中 START 顶部,对 src 等比例缩放,并最大限度的填充变换后的矩形,将其放置在 dst 的左上角,左上对齐...END 底部,对 src 等比例缩放,并最大限度的填充变换后的矩形,将其放置在 dst 的右下角,右下对齐 FILL 充满,拉伸 src 的宽和高,使其完全填充满 dst 一图胜千言: Matrix...在 Android 中的使用场景 其实我们日常开发中或多或少已经接触了 Matrix,只是大部分我们都还不知道,比如我们使用的 ImageView 的 ScaleType,实际上内部就是通过 Matrix

1.5K10

Canvas类的最全面详解 - 自定义View应用系列

:关于对画布的操作(缩放、旋转错切)原理都是相同的,下面会详细说明。...绘制矩形(drawRect) 原理:矩形的对角线顶点确定一个矩形 一般是采用左上角右下角的两个点的坐标。...与矩形相比,圆角矩形多了两个参数rx ry 圆角矩形的角是椭圆的圆弧,rx ry实际上是椭圆的两个半径,如下图: ?...绘制椭圆 原理:矩形的对角线顶点确定矩形,根据传入矩形的长宽作为长轴短轴画椭圆 椭圆传入的参数矩形是一样的; 绘制椭圆实际上是绘制一个矩形的内切图形。...// 绘制放大1.5倍后的蓝色矩形(红色) canvas.drawRect(rect,mPaint2); // 缩放的本质是:把形状先画到画布,然后再缩小/放大。

3K81

图片操作系列 —(1)手势缩放图片功能

我就来看PhotoView如何进行实现那么多功能。...所以我们要做如下操作: 把图片居中显示。 图片ImageView相适应(我们这里是把图片适当的放大,来适应这么大的ImageView.)...ScaleToFit 有如下四个值: FILL: 可能会变换矩形的长宽比,保证变换目标矩阵长宽一致。 START:保持坐标变换前矩形的长宽比,并最大限度的填充变换后的矩形。至少有一边目标矩形重叠。...CENTER: 保持坐标变换前矩形的长宽比,并最大限度的填充变换后的矩形。至少有一边目标矩形重叠。 END:保持坐标变换前矩形的长宽比,并最大限度的填充变换后的矩形。至少有一边目标矩形重叠。...只要算出我们在前面第二个大步里面的初始化后的图片的初始状态后(即ImageView相适应并且居中),相应的图片的矩阵的宽和高是不是超过ImageView。

3.1K10

带你玩转自定义view系列

下面就总结了一些 API,结合 Android 坐标系来看看该如何使用它们。 ?...Android画笔的详解 Android提供了2D图形绘制的各种工具,如Canvas(画布)、Point(点)、Paint(画笔)、Rectangles(矩形)等,利用这些工具可以直接在界面上进行绘制。...、restore | 依次为位移、旋转、缩放、保存画布恢复画布 | | drawPath | 按路径绘制 | Canvas 绘制颜色的 API canvas.drawARGB(int a, int...sx, float sy, float px, float py) //改变缩放中心并缩放canvas.save(); //保存画布canvas.restore(); //恢复画布 Canvas画布的操作可以让我们更加容易绘制图形...scale的前两个参数sxsy是X轴Y轴的缩放倍数,后两个参数pxpy是控制缩放中心的位置。

1.6K20

OpenGL ES for Android 绘制矩形正方形

前面的文章介绍了如何 绘制三角形,在OpenGL ES中没有直接绘制矩形的方式,通过绘制2个三角形的方式绘制矩形。...绘制矩形的顶点shader: attribute vec4 vPosition; void main() { gl_Position = vPosition; } 绘制矩形的片段shader:...mProgramHandle = GLTools.createAndLinkProgram(vertexCode, fragmentCode) } triangle_vertex.glsltriangle_vertex.glsl...分别表示顶点shader片段shader的文件,存放于assets/glsl目录下,readAssetsTxt为读取assets目录下文件的公用方法。...上面设置的顶点虽然都是0.5,但不一定是正方形,0.5表示x轴或者y轴的一半,如果绘制的窗口本身是矩形,那么绘制出来的也是矩形如何绘制出正方形呢?

1.1K10

学习 PixiJS — 补间动画

示例: 以下是如何使用 slide 方法使精灵用120帧从原始位置移动到坐标为(128,128)的位置的关键代码。...以下代码是精灵到达终点时如何使用 onComplete 方法在控制台中显示消息。...制作一个像画布一样大的蓝色矩形; 并在矩形中间添加上 Scene One 的文字,将两者都添加到 sceneOne 容器中。...再制作一个像画布一样大的红色矩形;并在矩形中间添加上Scene Two 的文字,将这两者添加到 sceneTwo 容器中。你最终得到的两个容器对象,如下图所示。 ? 以下是关键代码: //1....示例: c.wobble(sprite); 查看示例 如果你使用这些缩放补间效果(scale,breathe,strobe,或者 wobble),将精灵的锚点居中,就可以从精灵的中心进行缩放

2.2K30

SVG 线条动画基础入门知识

SVG 是什么 可缩放矢量图形,即SVG,是W3C XML的分枝语言之一,用于标记可缩放的矢量图形。...viewbox: 定义了画布上可以显示的区域,当 viewBox 的大小 svg 不同时,viewBox 在屏幕上的显示会缩放至 svg 同等大小 有了 svg 标签,我们就可以愉快的在内部添加 SVG...ok,像以前一样,我们先来解析一下(按步骤实现): 1、svg画个按钮(基础形状-矩形) 2、矩形只保留下方底边 3、实现鼠标:hover事件 + 动画效果 svg画个按钮 <div class=...button垂直水平居中、shape透明填充,边框宽度4px,边框颜色#1199ff。...后续文章将会详述非规则图形,如何使用 PS + AI 生成 path 路径,实现 SVG 动画,敬请期待。

2.9K30

Android画布Canvas--save方法saveLayer方法的区别

Canvas里面牵扯两种坐标系:Canvas自己的坐标系、绘图坐标系,当Canvas画布被创建时,Canvas的坐标系就被创建了,并且此坐标系是固定不变的,就是(0,0)到Canvas的宽高,而我们使用...往下是Y轴的正半轴,有且只有一个,唯一不变 绘图坐标系 它不是唯一不变的,它与Canvas的Matrix有关系,当Matrix发生改变的时候,绘图坐标系对应的进行改变,同时这个过程是不可逆的(saverestore...方法来保存还原变化操作),Matrix又是通过我们设置translate、rotate、scale、skew来进行改变的 由于绘图坐标系中Matrix的改变是不可逆的,所以产生了状态栈Layer栈,...它们分别运用于save方法saveLayer方法,使得绘图坐标系恢复到保存时的状态 状态栈 save、 restore方法来保存还原变换操作Matrix以及Clip剪裁 也可以通过restoretoCount...离屏缓冲),并且会将saveLayer之前的一些Canvas操作延续过来 后续的绘图操作都在新建的layer上面进行 当我们调用restore 或者 restoreToCount 时 更新到对应的图层画布

1.9K10

【适配】425- 彻底搞懂移动Web开发中的viewport与跨屏适配

(视口窗口) 视口是一个以特定于渲染设备的坐标表示的区域(通常为矩形)。视口范围内的图像会以剪切的形式,投影到到世界坐标窗口中,完成图像的可视化展示。...Q此处插入一个问题: 浏览器中,对页面进行放大的时候,视口的大小如何变化? 2.1 viewport 的缩放与平移 回答上面的问题,视口会变小。...Android iOS 在不同版本不同厂商的 Web 容器中,此属性的表现可能存在较大程度的不一致,请谨慎使用。...移动端多屏适配的需求,常见主要有两类: 1、布局伸缩式(布局伸缩,内容大小固定或梯级变化); 2、等比缩放式(布局内容完全等比例缩放)。...不做大的代码调整的话,等比缩放类的移动端网页,在 PC 上的合理展现方式应该是页面总宽度锁定在某个值,然后水平方向居中。(如下图) ?

3K30

彻底搞懂移动Web开发中的viewport与跨屏适配

(视口窗口) 视口是一个以特定于渲染设备的坐标表示的区域(通常为矩形)。视口范围内的图像会以剪切的形式,投影到到世界坐标窗口中,完成图像的可视化展示。...Q此处插入一个问题: 浏览器中,对页面进行放大的时候,视口的大小如何变化? 2.1 viewport 的缩放与平移 回答上面的问题,视口会变小。...Android iOS 在不同版本不同厂商的 Web 容器中,此属性的表现可能存在较大程度的不一致,请谨慎使用。...移动端多屏适配的需求,常见主要有两类: 1、布局伸缩式(布局伸缩,内容大小固定或梯级变化); 2、等比缩放式(布局内容完全等比例缩放)。...不做大的代码调整的话,等比缩放类的移动端网页,在 PC 上的合理展现方式应该是页面总宽度锁定在某个值,然后水平方向居中。(如下图) ?

3.3K20
领券