注意：本文是在没有客户端去辅助页面旋转的情况下做的技术探究；
最近在工作摸鱼的时候，发现 antvis/F2（移动端可视化方案）居然提供了横屏展示的功能。
https://antv-f2.gitee.io/zh/examples/creative/case#landscape
一年前我在使用 antvis/F2 做h5项目开发时，也遇到了图像横屏展示的需求，到 F2 的官网下找到了对应的 issue，
https://github.com/antvis/F2/issues/428
当时还是 open 的状态，横屏展示的需求还挺重要，客户端的同学因为工作排期也不能给予技术支持，自己感觉等不到 antvis/F2 的开发者来帮忙处理了，文档看了一遍又一遍，在源码里翻来翻去找思路，后来很庆幸解决了😊，和现在官方提供的解决思路异曲同工，虽然现在官方已经给出了方案，但是我还是把自己的方案分享出来，大家以后遇到类似的问题，也可以有借鉴的意义。
先谈谈我自己的解决方案。思路主要借助 antvis/F2 的插件机制。
https://antv-f2.gitee.io/zh/docs/api/plugin
个人觉得 antvis/F2 的插件机制还是非常强大的，大家有兴趣的，可以自己钻研一下。回到正题，我的解决方案具体是如何做的呢？
1. 定义一套旋转90度的横屏组件（通过css去做旋转）
2. 定义旋转触发的事件（ this.$emit('horizontalScreen', true)；）
3. 通过通过旋转字段（horizontalScreen）标识是否使用横屏组件
到这里看这流程很简单，这就可以实现可视化横屏了吗？重点来了，图像可以横屏了，但是没法去做横向操作，在提给官方的issue中我们也可以看到类似的提问题，eg：
所以横屏可视化的重点还是在 “图像横屏后，还可以保持操作的一致性”。这里我们可以仔细去研究一下官方文档 “自定义 Interaction” 和 “showTooltip” API
自定义 Interaction
showTooltip
我们可以通过通过自定义交互，去劫持 touch 操作对应的坐标值，然后使用chart.showTooltip 去设置tooltip的新坐标。直接上代码：
旋转插件实现
旋转插件注册
旋转插件的核心就是 process 函数 35～40 的代码，从 touches[0] 中获取 坐标值pageX 和 pageY ，配合使用 chart.showTooltip API，对展示的tooltip的位置的 x 值设置为 pageY, y 值设置为pageX，进行坐标上的纠正，就可以实现横屏手势的部分操作，因为我这边的项目不涉复杂的操作，不需要去单独处理 pan，select和zoom的复杂的手势操作。
最终效果如下:
其实代码在Y值的处理上，我是直接传值进行替换，因为是只涉及了横向拖动（和Y值有关系），所以问题一直也没发现，后来看了官方的Y值计算，发现相对于横屏左上角的Y值，还是需要做一次差值；
var height = canvas.get('height');
var y = height - point.x;
我们可以再来看看官方的解决方案 chart.landscape(true) , 使用可以说是相当的简洁了，旋转的实现由代码内部去完成。
让我看看内部代码到底做了些什么：
landscapePoint
834 ~ 840 的实现和我之前的实现基本一致；官方另外还对 landscape 提供了函数的实现形式，实现了一定程度上的用户自定义；
convertPoints
createEvent
通过以上代码我们可以分析出，这里就是在图像绘制点时，通过对 landscape 做判断，最终实现横屏功能；
最后我总结一下。第一种方案，主要是通过自定义插件拦截操作时的坐标值，再配合官方 API 去矫正横屏操作的问题；第二种方案，官方是通过对属性判断，在内部对坐标值做了矫正。核心都是去做坐标值的拦截并修改；
个人觉得在技术上还是要做到多做深度思考，很多问题都可以迎刃而解，对于使用的技术库和框架，还是有必要去学习一下，毕竟遇到问题了，也可以自己去解决；
另外推广一下个人微信公众号，以后不定期的总结一些个人工作中的思考和沉淀，欢迎大家关注；
