android canvas画布内容的缩放 40C

如何将canvas已经绘制出来的内容进行缩放
在缩放后还能够继续进行绘制
谢谢大佬帮助!

0

5个回答

canvas的缩放的话,你可以这样,先把想对于原始大小的缩放中心点平移到原点,以这个中心点缩放,然后再把要画的东西,看作是从(0, 0),平移到画布上的绘制目标点,最后绘制就行了。

0
crazyman_k
crazyman_k 有点没懂呢。。。
12 个月之前 回复

Canvas 缩放(Scale)

前言:前几天用到Canvas.scale(flostsx, float sy, float px, float py)函数,研究源码后没有看懂,就去网上找资料,发现关于Canvas.scale(flost sx, float sy, float px, float py)的分析很少。经过一天的研究,在此分享一下个人对此的理解,欢迎与各位交流。

本文只介绍Canvas的缩放(scale),关于平移(translate)和旋转(rotate)推荐看以下文章:http://blog.csdn.net/harvic880925/article/details/39080931

一. 缩放(Scale)

Canvas缩放有以下两个方法:

public void scale (float sx, floatsy) ;

public final void scale (float sx,float sy, float px, float py);

  1. publicvoid scale (float sx, float sy) ;

Paint mPaint= new Paint();
canvas.drawColor(Color.BLUE);
mPaint.setColor(Color.GRAY);
canvas.drawRect(new Rect(0, 0, 400, 400), mPaint);

// 保存画布状态
canvas.save();
canvas.scale(0.5f, 0.5f);
mPaint.setColor(Color.YELLOW);
canvas.drawRect(new Rect(0, 0, 400, 400), mPaint);
// 画布状态回滚
canvas.restore();

效果就相当于用个钉子钉在(0,0)处,然后把矩形的x,y缩放为一半,如下图所示:

  1. publicfinal void scale (float sx, float sy, float px, float py);

    Paint mPaint = new Paint();
    canvas.drawColor(Color.BLUE);
    mPaint.setColor(Color.GRAY);
    canvas.drawRect(new Rect(0, 0, 400, 400), mPaint);

// 保存画布状态
canvas.save();
canvas.scale(0.5f, 0.5f, 200, 200);
mPaint.setColor(Color.RED);
canvas.drawRect(new Rect(0, 0, 400, 400), mPaint);
前两个参数为将画布在x、y方向上缩放的倍数,而px和py 分别为缩放的基准点,如下图所示:

二. 重点来了

Canvas.scale (float sx, float sy, float px, float py) 源码如下:

/**

  • Preconcat the current matrix with the specified scale. *
  • @param sx The amount to scale in X
  • @param sy The amount to scale in Y
  • @param px The x-coord for the pivot point (unchanged by the scale)
  • @param py The y-coord for the pivot point (unchanged by the scale) */ public final void scale(float sx, float sy, float px, float py) { translate(px, py); scale(sx, sy); translate(-px, -py); } translate(px,py);

scale(sx,sy);

translate(-px,-py); …………..I

scale(sx,sy); …………..II

不是一样的吗?为什么显示的效果不同?

原因是translate(px, py)移动的物理距离分别是px和py,经过scale(sx, sy)缩放后再通过translate(-px, -py)位移,移动的物理距离就是-px*sx和-py*sy。

我个人的理解是scale(sx, sy)缩放类似于px转换成dp的过程,才会出现I和II的效果不同。

三. 验证

  1. 先translate(float fx, float fy)位移,后scale(float sx, float sy)缩放

    Paint mPaint = new Paint();
    canvas.drawColor(Color.BLUE);
    mPaint.setColor(Color.GRAY);
    canvas.drawRect(new Rect(0, 0, 400, 400), mPaint);

// 保存画布状态
canvas.save();
canvas.translate(200, 200);
canvas.scale(0.5f, 0.5f);
mPaint.setColor(Color.YELLOW);
canvas.drawRect(new Rect(0, 0, 400, 400), mPaint);

  1. 先scale(float sx, float sy)缩放,后translate(float fx, float fy)位移

    Paint mPaint = new Paint();
    canvas.drawColor(Color.BLUE);
    mPaint.setColor(Color.GRAY);
    canvas.drawRect(new Rect(0, 0, 400, 400), mPaint);

// 保存画布状态
canvas.save();
canvas.scale(0.5f, 0.5f);
canvas.translate(200, 200);
mPaint.setColor(Color.YELLOW);
canvas.drawRect(new Rect(0, 0, 400, 400), mPaint);

0
crazyman_k
crazyman_k canvas.scale和translate操作对象不是画布本身么 对已经绘制并且显示在屏幕上的内容没有进行操作的哇?
12 个月之前 回复

已经画在屏幕上的不是问题呀,先把画布缩放了再画一遍不久好了。如果还有其他操作最好先保存一下画布的状态。

0
a568478312
JabamiLight 回复crazyman_k: 你使用path把路径保存起来,下次直接再绘制就行了,不用一条一条的画,而且要改变屏幕上的东西,只能重新绘制,然后屏幕才会去渲染下一帧的内容。
12 个月之前 回复
crazyman_k
crazyman_k 重新画一遍特别耗时呀 因为画的是一条路径 所以如果重新画 需要一条线段一条线段画 这样会花费很长时间
12 个月之前 回复

可以对surfaceView缩放。
通过计算缩放率(比如双指捏合,通过计算两指滑动距离计算缩放率),来计算surfaceView的left,top,right,bottom,(比如left = surfaceView.getLeft + 滑动水平距离)
然后调用 surfaceView.layout(left, top, right, bottom);

0

Matrix matrix = new Matrix();
matrix.postScale(canvas.getWidth()*1.01f/bmpBg.getWidth(), canvas.getHeight()*1.01f/bmpBg.getHeight(), bmpBg.getWidth() / 2, bmpBg.getHeight() / 2);
matrix.postTranslate( (canvas.getWidth()-bmpBg.getWidth()) / 2, (canvas.getHeight()-bmpBg.getHeight()) / 2);
canvas.drawBitmap(bmpBg, matrix, paint);

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
android Canvas的平移与缩放
转载 https://blog.csdn.net/u011451706/article/details/52473382
canvas scale()画布缩放的使用
前两天把canvas的translate()和rotate()的方法都介绍了下,今天就来说说scale()scale() 方法缩放当前绘图,更大或更小。 注释:如果您对绘图进行缩放,所有之后的绘图也会被缩放。定位也会被缩放。如果您 scale(2,2),那么绘图将定位于距离画布左上角两倍远的位置。 scale(x,y) 参数:x:X表示横轴方向上缩放倍数 y:Y表示纵轴方
canvas中的缩放示例
文字排版      function  clearmap(){      context.clearRect(0,0,300,200);      } function draw(){ var c=document.getElementById("canvas"); var context = c.getContext("2d");     con
安卓自定义View时,处理canvas缩放引起canvas.drawBitmap画质降低
自定义view时,经常会用到图片绘制,canvas.drawBitmap家族可以说是非常常用的API,不过有时候开发中要求我们的控件在某些页面是一个比例,某些页面是另一个显示比例,例如我遇到的,item的角标,噗……又是这个,在主页面是100%显示,在列表页要85%显示。 对于整体大小的控制,可以想到单独对自定义view里的各个元素宽高属性进行参数控制,但是这样既麻烦,又要写一大堆代码,很少浪费...
HTML5 Canvas 开发 绘图方法整理 【九、Canvas旋转、缩放】
rotate() 旋转当前绘图   (旋转) 语法: ctx.rotate 需要注意的是它默认旋转的原点并不是以之前绘制的图形某一点为原点 而是以Canvas 画布 x轴坐标0 y轴坐标0 的位置为原点的; 可以看下示例代码 ctx.fillStyle="#27A5FF"; ctx.fillRect(50,5...
WPF 的Canvas画图区整体缩放与平移(一)
WPF对象都具有RenderTransform的属性,可以通过设置RenderTransform来对WPF的元素进行变换,无论是控件还是形状都可以变换。典型的变换包括缩放和平移: (一)缩放 如果采用Canvas作为画板来绘制一些形状,想要通过鼠标或触摸操作来进行放大或缩小,那么不能简单地对canvas进行变换,否则Cancas放大的时候就会覆盖周边的其它控件,也就是Canvas占据的屏幕变大...
Android 如何清空 Canvas 清屏只需三句话
android开发--Canvas清屏只需三句话 分类: Android开发 2012-11-28 21:51 4269人阅读 评论(19) 收藏 举报       这两三天一直在研究这个问题,今天终于成功了。我最终要实现的效果是,类似于照相机照相时,第一次按下按键,会出现矩形框框住人脸,这时我不想照相,再次按下会再次框出人脸,重新画个新的矩形框。 就这么简单。 误区
Bitmap和Canvas的平移、缩放、旋转
Matrix matrix = new Matrix(); matrix.postTranslate(tx, ty); matrix.postScale(scale, scale); canvas.drawBitmap(bmp, matrix, null); (画布不动,bmp先平移后缩放,均是相对于原始坐标) (等价) Matrix matrix = new Matrix();
自定义控件(11)---Canvas的平移、旋转、缩放、错切、Matrix直接变换Canvas
Canvas中的变换操作,说起变换,无非就几种:平移、旋转、缩放和错切,而我们的Canvas也继承了变换的精髓,同样提供了这几种相应的方法,前面的很多章节我们也都用到了,像translate(float dx, float dy)方法平移画布用了无数次,这里再次强调,translate方法会改变画布的原点坐标,原点坐标对变换的影响弥足轻重,前面也多次强调了!scale(float sx, floa
Canvas清理画布
清理画布 第一种方式:canvas.drawColor(colorAlpha, PorterDuff.Mode.CLEAR); 第二种方式: Paint p = new Paint(); p.setXfermode(new PorterDuffXfermode(Mode.CLEAR)); canvas.drawPaint(p); p.setXfermode(new PorterDuffXfermode(Mode.SRC_IN)); 这两
Android canvas 放大 缩小 平移
Android canvas 放大 缩小 平移 各种绘图 自定义view 请自行修改
Android 如何清空 Canvas ?(找了好久的答案)
Android 如何清空 Canvas ? 似乎一直未找到好的解决办法,有的方法限制使用纯色背景,但无论怎么尝试,都未见效果, 终于在 http://stackoverflow.com/questions/4650755/clearing-canvas-with-canvas-drawcolor  上面找到了答案: 经过尝试,结果如下:       之前的不理想图片
canvas实现点击,拖拽和缩放的效果
目标:实现红点的点击,拖拽,和缩放效果。 思路:1.缩放通过scale,通过计算鼠标滚轮的滚动实现放大和缩小。 2.拖拽和点击通过定时器区分点击和长按,长按拖拽,点击alert一句话。 直接上代码:   <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">...
Android 利用Canvas实现双指拖动和双指缩放图片
背景  关于Android中使用Canvas绘制图片对于大家来说已经很熟悉了.关于图片的缩放和拖动,一般使用到的技能是:单指拖动图片和双指缩放图片.最近由于工作的要求,需要实现:   1.双指拖动和在拖动过程中控制图片缩放.   2.绘制的线条与背景图片实现正片叠底的混合效果.先上效果图: 原理:使用的原理:   1.我采用的是自定义View的方式来控制图片的缩放,坐标系起始点(0,0)在整
canvas旋转,平移,缩放一二例
Document *{ padding:0; margin:0; } canvas{ display: inline-block; } //canvas旋转,缩放,平移操作都是对整个画布的操作,如果有多次的话,本次操作是在上一场的操作的基础上操作的 //canvas平移是对
canvas实现滚动条缩放图片的demo
html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> head> body style="background: black;"> canvas id="myCanvas" style="display: block;border: 10px solid #aaa;margin: 0 auto
Android 清除canvas内容(转载)
转载自:https://blog.csdn.net/heiding215/article/details/19197733画新的东西之前需要先清除画布内容:方法1:[java] view plain copycanvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);  方法2[java] view plain copyPaint pain...
canvas rotate()画布的旋转详解
刚才还是风和日丽的天,这没一会会就乌云密布了,雨呀,眼瞅就下来了呢,一场秋雨一场寒,感觉懂得要穿棉袄了的节奏 10月1号之前,还是T恤呢,10月放完国庆节和中秋节以后就开始毛衣、毛衫、毛外套了,这真的是8天过了一个季节呀~~~ 大概北方的秋天都是这么快的吧 继续来看看canvas的rotate()方法 rotate()旋转当前的绘图。 语法:context.rotate(angle) 参
android画布局部矩形擦除
canvas.save(); canvas.clipRect(rect); canvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR); canvas.restore();
Android笔记 自定义View(八):Canvas使用之画布操作
目录 一、简介 1、为什么要有画布操作? 二、Canvas的基本操作 1、Translate(平移) 2、Scale(缩放) 3、Rotate(旋转) 4、skew(错切) 5、save(快照)和restore(回滚) 6、clipXXX(裁剪) 6.1、clipRect 6.2、clipPath 7、saveLayer(图层) 三、总结 一、简介 Canvas类中的...
canvas中状态保存与回滚,和平移/旋转/缩放的应用
1.1、状态保存:ctx.save();把当前状态(绘制环境的所有属性)复制一份保存起来,多次调用可以保存多份状态1.2、状态回滚:restore();把最近保存的一次状态作为当前状态回滚一次会把上次保存的属性删掉再回滚会拿到上次保存的属性可多次回滚,一次往回找save保存的属性2.1、translate(x轴平移量,y轴平移量)平移坐标轴:已绘制的图形不会收到影响,只会影响平移之后绘制的,平移会...
Android-自定义UI-设置画布的大小
//自定义一个类,用来写ui界面 public class MyButton extends View { public MyButton(Context context) { super(context); } public MyButton(Context context, @Nullable AttributeSet attrs) {
html5 Canvas画图教程26:用transform来实现位移,缩放,旋转等
本文属于《html5 Canvas画图系列教程》,本文有些长.前面我讲过在canvas中实现图形的变换,这是比较简单的,因为都是用的直观的函数.今天我还是要实现同样的图形变化效果,但不同的是我要用一个看起来就让人心碎的方法,就是transform,也就是矩阵matrix.其实我对Matrix的认识只限于他是一部很好看的电影(即黑客帝国),在没看此电影前,我根本不知道有矩阵这个名字,而且矩阵这名字又...
Canvas实现 图片裁剪、移动、放大缩小以及图片的合成
Canvas实现 图片裁剪、移动、放大缩小以及图片的合成前段时间项目上需要做一个合成图片的小活动,参考了很多案例,发现还是用canvas最为简便。[StackEdit][6]:目录用 [TOC]来生成目录:Canvas实现 图片裁剪移动放大缩小以及图片的合成 目录 图片绘制ctxdrawImageimagesxsyswshdxdydwdh 图片合成canvastoDataURLtype encode
Android 刷新、重绘 画布
Android 刷新、重绘 画布 吐槽 在自定义View中,如果你需要重绘画布达到动态的效果,你的第一个想法是在onDraw方法中把canvas画布对象拿出来,可是你会发现,拿出来的对象是Null,不管你怎么赋值都没用,这可能也是你找到这帖子的原因。 正题 如果需要动态的更换画布,首先你需要将里面的数据写到随时能调用的地方,比如说全局变量。 重写 invalidate方法 ...
Canvas之画布操作
canvas 画布基本操作
Android实战技巧之二十九:画布Canvas
Android Framework提供了一些2D画图的API,android.graphics包就是其中之一。 为了画一些东西,需要4个元素(或称组件)协同来完成: * 位图:Bitmap来保持(hold)那些像素 * 画布:Canvas来响应画画(draw)的调用(并将其写入bitmap) * 画笔:paint描述画画的颜色和样式等 * “颜料“:drawing primitive,比如
H5canvas加载图片·绘制像素图·旋转平移缩放图片等等学习实践
canvas高级功能实现 /*显示图像*/ var k=document.getElementById("canvas1"); var kellen=k.getContext("2d"); var disk=new Image(); disk.src="../img/zhuanpan.png"; disk.onload=function(){ kellen
总结双指缩放图片的实现设计到的知识
这部分涉及到触摸事件,需要认识 public boolean onTouchEvent(MotionEvent event)    这里面的event参数,为手机屏幕触摸事件封装类的对象,包含了如触摸位置、类型、时间等。在屏幕被触摸时创建该对象。 该方法的返回值机理与键盘响应事件的相同,同样是当已经完整地处理了该事件且不希望其他回调方法再次处理时返回true,
Android 自定义画布 绘制 撤销 清空
Android 自定义画布 绘制 撤销 清空 ssssssssssssss
Atitit html5 Canvas 如何自适应屏幕大小
Atitit  html5 Canvas 如何自适应屏幕大小   可以用JS监控屏幕大小,然后调整Canvas的大小。在代码中加入JS 1 2 3 4 5 6 7 $(window).resize(resizeCanvas);  function resizeCanvas() {         canvas.attr("width"
wpf 可缩放的canvas
这个是转的一个可缩放的canvas例子,可以直接用,很方便
小程序canvas内容实现不同尺寸屏幕自适应
       小程序canvas的API并没有像其他的一样支持小程序独有的 rpx 自适应尺寸单位,在绘制内容时所应用的单位仍然是 px,那么如何实现不同尺寸屏幕的自适应呢? 首先我们根据开发工具可知不同常用屏幕的尺寸: 由此可知我们开发中常用的参考屏幕尺寸(iPhone6)为:375*667; 那么想要适应其他尺寸的屏幕时只需按照iPhone6的绘制大小按比例进行换算即可: 首先利用...
SurfaceView清空Canvas如何操作
public void ClearDraw(){ Canvas canvas = null; try{ canvas = surfaceHolder.lockCanvas(null); canvas.drawColor(Color.WHITE); canvas.drawColor(Color.TRAN
android Canvas清屏只需三句话
public void drawLine(Point p1, Point p2, Point p3) { Canvas canvas = sh.lockCanvas(); canvas.drawColor(Color.TRANSPARENT); Paint p = new Paint(); ...
自定义控件设置canvas画布的大小
自定义的控件用canvas控制它的大小 @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { //设置宽高 setMeasuredDimension(900,500); } 只用重写onMeasure这个方法,然后设置它的宽高就可
小程序canvas中drawImage自适应宽度铺满屏幕
在微信小程序创建画布并且自适应屏幕宽度铺满屏幕 wxml先创建一个画布 <view class='page'> <button bindtap='click' type='primary' size='mini'>打开</button> <canvas class='canvas' canvas-id='myCanvas' disable-scr...
Img转换为canvas、写字、该canvas正常放大缩小、保存canvas为本地图片
项目中有一个需求:实现画板的功能。提供一张图片。可以在上面写字,并且可以放大缩小。1.图片转换为canvas在render中先插入一张图片和一个canvas,给img添加src。等到src加载完成后。获取这个图片并绘制canvas(这边也可以使用new Image()方法) 代码: canvas.width = img.width; can...
HTML5 canvas标签的全屏、退出全屏,canvas中显示的缩放、移动,小坑盘点
选择任意标签全屏显示,这儿是canvas,触发函数绑在按钮上: 此处没坑 $('#tab_fullScreen').click(function(){ fullScreen(); }); function fullScreen() { var element = document.getElementById('tab_canvas'),method = "RequestFul
Android 怎么使用Bitmap+Canvas 自适应屏幕
我们可以使用Matrix 来放缩我们得到的Bitmap 从而使我们的BItmap适应我们的手机屏幕 首先我们得先获取我们的手机屏幕的大小 WindowManager wm = (WindowManager) getContext().getSystemService( Context.WINDOW_SERVICE); int width = wm.getDefault
文章热词 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型 设计制作学习
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 大数据培训内容 java学习内容