开源 Android InDoorView 室内选位控件，助力快速开发

[karonl]

介绍

先给个简单的介绍，最近接到个 case ，大概是开发一个可以室内选工位的 app 。这我们很容易想到电影院的选座位，可有点不一样，因为每个区域都是不同大小并且位置不一，而我们手上的材料只有一张标识有区域的 jpg 地图。一开始我使用引擎来做，结果可想而知，为了个简单功能引入整个库非常不明智。

应用场景:

该控件可让室内图片上的区域拥有点击事件，可用于开发电影院选座、商场购物地图、展位摊位在线预定、办公场地租赁工位等需要操作不规则区域的功能。

原理:

把读取地图底图 bitmap 和使用 Paint 的钢笔路径集合一同绘制到一个 canvas 上保存，并通过继承 SurfaceView 把 canvas 绘制到双缓画布中，通过 canvas.drawBitmap 实现缩放和移动，重写 view 点击事件结合 Region 判断点击坐标位于哪个区域内，再通过接口反馈事件。

采用把所有图案内容事先缓存到 canvas 的方法，使用非 UI 线程进行绘制，可实现每秒 60 次左右的界面绘制，实现流畅的移动和缩放操作；在没交互情况下，暂停绘制及刷新以节约计算资源。

特性:

1. 性能较强，绘制达到 60 帧上下
2. 支持缩放以及拖动
3. 直接使用原生 SurfaceView ，无需导入庞大的引擎库

Github:

https://github.com/karonl/InDoorSurfaceView (thanks for your star✨)

Demo:

直接使用 Android Studio 导入工程即可运行

如何导入 InDoorView 库:

1. clone 到本地
2. 复制 InDoorView 文件夹到目标项目的根目录 (InDoorView 使用的是 apply plugin: 'com.android.library')
3. 在 settings.gradle 文件中 include ':InDoorView'
4. 在主模块(一般是 app 文件夹)中的 build.gradle 中添加依赖

   dependencies {
      compile project(':InDoorView')
   }
   

5. 点击 Sync 进行构建
6. 根目录的 src 是 demo ，可做参考

注:直接导入工程是 demo ，可直接运行测试

如何使用:

1. 初始化 在 xml 文件中使用进行声明

   <com.karonl.instance.InDoorView
       android:id="@+id/surface"
       android:layout_width="match_parent"
       android:layout_height="match_parent" />
   

   在对应的 activity 中进行引用，并通过设置适配器，把底图和区域 list 填入，并 refreshData();

   InDoorSurfaceView view = (InDoorSurfaceView)findViewById(R.id.surface);
   DataAdapter adapter =  new DataAdapter();
   view.setAdapter(adapter);//初始化
   adapter.setBmp(bmp);//设置图片(底图)
   adapter.setList(list);//设置数组(图上的可点区域)
   adapter.refreshData();
   

2. 上面代码的 list 的具体设置看这里:

   (输入钢笔路径相对于图片左上角的节点坐标)

   //每个图案的节点坐标集合
   private List<PointF> getList(){
       float density = getResources().getDisplayMetrics().density;
       List<PointF> pointList = new ArrayList<>();
       pointList.add(new PointF(99.1f * density,673.1f * density));
       pointList.add(new PointF(222.1f * density,670.1f * density));
       pointList.add(new PointF(227.1f * density,327.1f * density));
       pointList.add(new PointF(94.1f * density,321.1f * density));
       pointList.add(new PointF(100.1f * density,674.1f * density));
       return pointList;
   }
   
   //区域列表
   private void getUnitList(){
       PathUnit unit = new PathUnit(getList());//把节点换成一个 PathUnit 元素
       unit.setName("John Market");//设置元素的名字
       unitList.add(unit);//添加到区域列表
   }
   
   

   注：从资源读取的图片对应的坐标要乘上 desity ，网络加载的图片则不用

3. 接口说明: 通过该接口可以返回点击到的区域的 PathUnit 元素，可通过此来获取区域名字等信息

   view.setOnClickMapListener(new InDoorSurfaceView.onClickMapListener() {
       @Override
       public void onClick(PathUnit region) {
       //读取 pathunit
       }
   }            
   

   该接口是 fps 帧率

   view.onFramesListener(new InDoorSurfaceView.FramesListener() {
       @Override
       public void onRefresh(float number) {
       //帧率
       }
   }    
   

环境:

compileSdkVersion 24
buildToolsVersion "24.0.0"
minSdkVersion 16
gradle plugin:gradle:2.1.2

另外:

1. 如果你有项目使用了该库也可以告知我，我将把你的 app 作为示例
2. 如果你有建议或者想法，也欢迎告知我，这将让开源代码变得更好
3. 如果程序有 bug 和改善方法，感谢提 Issues ，有劳指教!

为每个区域分别设定坐标的时候，衡量 x ， y 确实繁琐。不过已经为此开发了个前端版本的 “绘制画板”，事先导入图片，通过圈选出所有区域，最后生成 json 。当然你也可以自己写个协助程序，或者等我开源。

[kenshinhu]

这个之前也有尝试过用 svg 来实现,但代价是需求美工将图用 AI 来绘,之后手动在对应的区域映射指定的事件

[xiezuan]

好牛，看下

[Ervin]

666666

[kslr]

Nice

[sobigfish]

SVG+JSON 的数据源更方便点吧。。。
区块有 ID ， json 直接对应 ID

[karonl]

@sobigfish 这个提议可以，回头研究一下