Android端与PC端同步绘画板(二)-适配手机和PC屏幕大小

前言

关于手机端与PC端如何建立通讯，请参考：
Android端与PC端同步绘画板(一)-使用Socket建立连接
这篇文章我们来简单说一下关于手机端和PC端的屏幕适配问题，因为我们都知道因为Android碎片化问题，屏幕适配一直是个难题，所以android和pc之间画板也是需要屏幕适配的，否则会造成一系列问题；

问题

从上图我们可以看到假如手机端为全屏绘制，屏幕的分辨率为1280*720，可绘制区域也就是1280*720，PC端画板在电脑上给一个固定的宽高，可绘制区域的分辨率为800*600；
假如在手机端的500*500的位置绘制圆1，由于两边的分辨率大小不同，在PC端的显示位置有所偏移，同样是500*500的位置绘制的圆1，但显示效果却大不相同
同样在手机端1100*650位置绘制圆2，由于PC端的可绘制区域大小只有800*600，所以根本就无法显示出Android端绘制的圆2；

如何解决

1.给android端一个可绘制区域的View一个固定的大小（800*600），使用Px来做尺寸单位，这样子，绘制出来的位置就会和PC端同步，但由于android的碎片化问题，因为同样100px的图片，在不同手机上显示的实际大小可能不同，如下图所示：

同样，这样子的方式，在手机端绘制区域是无法全屏绘制的；
2.第二种方式先说一下大概思路：

首先将可绘制区域的View宽高设置为match_parent;
然后在View执行onMeasure方法的时候记录下View的原始大小，并给定新的大小（和PC端一样的大小）
接着在View执行onSizeChanged方法的时候使用获取到的原始大小除以重新给定的大小得到缩放倍数，调用方法将画布进行缩放；
缩放后的画布位置发生了改变，调用方法平移到原先位置即可；

假如我们给定PC端画布的大小为800*600，以屏幕分辨率为1280*720的手机为例

<com.rock.drawboard.ui.view.SketchpadViewandroid:id="@+id/SketchadView"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_toLeftOf="@+id/control_board"/>

1.首先将Android端用来绘制的View宽高设置为match_parent，此时Andorid端画布的View应该为1280*720

    private int oldWidth;private int oldHeight;private final int CONFIRM_WIDGHT = 800;private final int CONFIRM_HEIGHT = 600;@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure(widthMeasureSpec, heightMeasureSpec);int w = MeasureSpec.getSize(widthMeasureSpec);int h = MeasureSpec.getSize(heightMeasureSpec);//取得view原始宽高oldWidth = w > oldWidth ? w : oldWidth;oldHeight = h > oldHeight ? h : oldHeight;//设置新的宽高setMeasuredDimension(CONFIRM_WIDGHT, CONFIRM_HEIGHT);}

2.然后我们在View的onMeasure方法中获取View的初始宽高，并设置新的宽高（800*600），由于设置新的宽高后View会重新调用onMeasure方法，所以我们用个三目运算来得到最大宽高，设置新的宽高后由上图可知画布的中心点和位置产生了移动；

protected void onSizeChanged(int w, int h, int oldw, int oldh) {LogUtils.e("onSizeChanged", "width: " + w + "height:　" + h);//根据原始大小进行缩放float scaleX = (float) oldWidth / (float) w;float scaleY = (float) oldHeight / (float) h;setScaleX(scaleX);setScaleY(scaleY);//缩放后平移到原始位置setTranslationX(-(oldWidth - w) / 2);setTranslationY((oldHeight - h) / 2);}

3.接着在onSizeChange方法中首先进行缩放，将800*600的画布缩放到原来的大小，但分辨率不变，又上图可知缩放后由于中心点位置所以有一部分画布移动到了屏幕外边；
4.最后我们调用方法进行平移，就完成了将画布重新布满屏幕，并且分辨率为800*600；
5.此时Android端和PC端的屏幕分辨率即可一致；

具体实现细节请参考项目：

Android端源码地址

Android端与PC端同步绘画板(二)-适配手机和PC屏幕大小相关推荐

Android实现的写字板（绘画板）
Android实现的写字板(绘画板) 前言: 通过Android实现绘画板的功能,能够在应用中进行绘画(写字)操作,完成绘画(写字)后,可以将我们自己绘制的图画(字体)进行保存,同时也能清空画板上的内 ...
android 绘画开源,Android 开源可缩放平移的绘画板
ScaleSketchPadDemo 此项目包含两个模块 app1 为普通绘画板 app2 为可所发的绘画板方便各位Android 开发者理解和使用用法: clone or download 项目 ...
php代码同步工具下载,织梦手机助手(PC+WAP完美同步) v2.0
织梦手机助手的优点: 1.模板制作简单,通用织梦标签 2.同一后台,易操作和管理 3.可生成HTML静态页面,易优化 4.自动识别自动调转 5.支持一键同步更新电脑手机版织梦手机助手安装步数: ( ...
Android适配手机与平板屏幕尺寸
一.划分手机和平板人为判断方法: 大于6英寸的就是平板.小于6英寸的都是手机平板尺寸: 6英寸.7英寸.10英寸.14英寸- Android系统支持多配置资源文件,我们可以追加新的 ...
Android组件学习笔记（简易绘画板）
自学Android中,根据一位前辈的代码进行学习,理解,在其基础上做了一些改进功能简述:1,画图2.清空3.改变画笔大小4.全屏渲染5.改变颜色初始界面是一张图片,下载需注意一下样例图片: 源代 ...
【Android】Webview加载url出现空白但是在手机或者pc的浏览器中可以正常打开的解决方法
// 进行WebView的相关配置private void initWebViewLoad() {//访问网页webView.loadUrl(mWebViewUrl);WebSettings webS ...
android界面设计所用中文什么字体,「界面」手机界面设计字体大小知多少
今天我们来讨论一下界面字体大小的问题,上篇文章我们讨论到使用什么字体的问题,这篇文章我们主要讨论手机界面设计中字体应该多大的问题. 做移动界面和做网页,平面最大的不同之处在于当你使用软件设计的时候,你 ...
Android O 自定义通知实例及一个自定义自动适配缩放图片至特定大小的田字格ImageView
这一篇博文的思路很简单,没有什么深入的理论,源由是最近在实习公司里开发用到了Android O的通知,发现与以往有所不同,相关的资料是有,但是大部分都不适用于这个版本,这里只是写一个非常简单的Demo ...
php取当前是pc还是手机号,利用PHP判断是手机移动端还是PC端访问的函数示例
前言最近在开发项目的时候,分别开发了PC端和手机端,需要实现,用手机访问PC端WWW域名的时候,自动判断跳转到移动端,用电脑访问M域名手机网站的时候,自动跳转到PC端网站,于是有了下面这个判断函数: ...

Android端与PC端同步绘画板(二)-适配手机和PC屏幕大小

前言

问题

如何解决

Android端与PC端同步绘画板(二)-适配手机和PC屏幕大小相关推荐

最新文章

热门文章