android绘图canvas的sava、restore、rotate以及若干有关问题，canvas绘图的理解

android绘图canvas的sava、restore、rotate以及若干问题，canvas绘图的理解

不知道是我的理解能力有问题还是怎么回事，网上有很多举例说明的，我都看不懂，理解不能，而楼下还有很多的人说一目了然浅显易懂。纠结了N久，决定自己来理解一番，做个记录。

所有的操作都是通过canvas来实现的，这个的意思是说，平移、旋转、放大缩小的操作，都是直接操作canvas来实现。canvas就是一般理解的画布。导致理解错误的根源就是这里。

经常看到这样的代码：

<img style="max-width: 100%;height: auto;width: auto\9;" src="//img.reader8.net/uploadfile/jiaocheng/2014018/2602/2014012612024515153.jpg" alt="android绘图canvas的sava、restore、rotate以及若干有关问题，canvas绘图的理解"><br></p><p><strong>还有一个问题，图上方块的位置和代码里面的貌&#20284;也不一样，这个后面再说</strong></p><p><strong><br></strong></p><p>        然后试验了几次之后我发现，画图的canvas和显示没关系，而这个canvas又只影响你画图。</p><p>        意思就是，画图，实际上是画在这个canvas定义的范围和规则下，但是显示在屏幕上，如下图：</p><p><img style="max-width: 100%;height: auto;width: auto\9;" src="//img.reader8.net/uploadfile/jiaocheng/2014018/2602/2014012612024515154.jpg" alt="android绘图canvas的sava、restore、rotate以及若干有关问题，canvas绘图的理解"><br><br></p><p>蓝色的是手机屏幕边框，红色的是一个全屏的canvas</p><p><br></p><p><img style="max-width: 100%;height: auto;width: auto\9;" src="//img.reader8.net/uploadfile/jiaocheng/2014018/2602/2014012612024515155.jpg" alt="android绘图canvas的sava、restore、rotate以及若干有关问题，canvas绘图的理解"><br></p><p><br></p><p>        当canvas旋转30度之后，其实成了这个样子，但是你绘制的图形还是只能在canvas内，并且坐标是按照canvas旋转之前来的，也就是左上角坐标仍然是（0，0），右下角的坐标仍然是（width，height）。</p><p>        也就是说，你按照（100，100，150，150）画出来的rect需要旋转30度之后，才是你看到的效果，这就是上面那个坐标看上去好像不对的原因。</p><p><br></p><p><strong>忘记个重要的事情，这个canvas只是定义了画图的规则，范围，但是其实图是画在屏幕上的，所以最开始那个2个rect谁该旋转的问题就解决了。</strong></p><p><strong><br></strong></p><p><strong><br></strong></p><p>        那么save和restore的问题也就好解决了，save只是save了当前这个canvas的状态，和已经画出来的图形无关，restore就是取出最近一次save的canvas的状态，仍然不影响图形。</p><p><br></p><p><br></p><p><br></p><p>        还有一个涉及到的问题就是，如下面旋转canvas之后的图，那么这个时候画在canvas之外的图形会怎么处理保存，试验了之后发现，由显示控件截取。</p><p>        也就是说如果我画在一个bitmap上，那么这个bitmap的边界就是能显示的最大范围</p> </p></div><div style="margin:0 auto;width:300px;height:250px;position:relative;">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 移动端全站正文 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-6147101717324856"
data-ad-slot="1958144088"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
<div class="subn-nav"><a href="//m.reader8.net">读书人网</a> ><a href="//m.reader8.net/jiaocheng/android/">Android</a></div><div class="sp-jctu"><h3><span> 热点推荐 </span></h3><ul><li><p><a href="//m.reader8.net/jiaocheng/20130905/1409754.html">android快2年了这个有关问题大家给个</a></p></li>
<li><p><a href="//m.reader8.net/jiaocheng/20140525/2338264.html">android 名词征集</a></p></li>
<li><p><a href="//m.reader8.net/jiaocheng/20140525/2338262.html">android TimePicker 控件自定义式样</a></p></li>
<li><p><a href="//m.reader8.net/jiaocheng/20140524/2337363.html">Android实现读物翻页效果-扩展版(转)</a></p></li>
<li><p><a href="//m.reader8.net/jiaocheng/20140524/2337362.html">新人自学中,该如何处理</a></p></li>
<li><p><a href="//m.reader8.net/jiaocheng/20140514/2329200.html">android触控,先懂得MotionEvent(一)</a></p></li>
<li><p><a href="//m.reader8.net/jiaocheng/20140514/2329199.html">android应用开发：第一次打开app时是欢</a></p></li>
<li><p><a href="//m.reader8.net/jiaocheng/20140512/2328885.html">求解：android 4.0读写HID设备解决方案</a></p></li>
<li><p><a href="//m.reader8.net/jiaocheng/20140511/2327972.html">seekbar,该怎么处理</a></p></li>
<li><p><a href="//m.reader8.net/jiaocheng/20140511/2327971.html">Android 开发类似微信的程序,该如何处</a></p></li>
</ul></div><div style="display:none;">
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "//hm.baidu.com/hm.js?d6151f323a57d16696165e47eee86d53";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script></div>
<div class="footer"><p>触屏版 | <a href="//www.reader8.net/jiaocheng/20120621/1425995.html#fromapp">电脑版</a></p><p>读书人网 m.reader8.net</p></div>
<script language="javascript">
function clickme(sad){
var divobjdiv = document.getElementById("divobjdiv" + sad);
if(divobjdiv.style.display =="none"){
divobjdiv.style.display ="block"; 
}else{
divobjdiv.style.display ="none";
}
var wenzi = document.getElementById('divobjimg' + sad);
if(wenzi.innerText == "收起"){
wenzi.innerText = "查看更多";
}else{
    wenzi.innerText = "收起";
  }
}
</script>
<div id="back-top"><a href="#top"><span></span></a></div>
</body>
</html>