atom.xml

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <title>喵窝</title>
  <subtitle>您在本站所读到的每一个字，都是我家猫在键盘上踩出来的</subtitle>
  <link href="/atom.xml" rel="self"/>
  
  <link href="http://hikarievo.me/"/>
  <updated>2017-05-28T07:41:35.685Z</updated>
  <id>http://hikarievo.me/</id>
  
  <author>
    <name>阿布</name>
    
  </author>
  
  <generator uri="http://hexo.io/">Hexo</generator>
  
  <entry>
    <title>用户体验经验须知</title>
    <link href="http://hikarievo.me/2017/05/13/experience-required/"/>
    <id>http://hikarievo.me/2017/05/13/experience-required/</id>
    <published>2017-05-13T13:54:12.000Z</published>
    <updated>2017-05-28T07:41:35.685Z</updated>
    
    <content type="html">&lt;p&gt;&lt;img src=&quot;http://7qnahw.com1.z0.glb.clouddn.com/IMG_20170510_193623_mix01.jpg&quot; alt=&quot;用户体验设计 本质、策略与经验&quot;&gt;&lt;br&gt;当编辑在群里问谁有兴趣翻译一本书的时候，我还没想过事情会变成这样。神坑腰斩何其多，更别提什么朝三暮四，或者昨天还是负责人，今天已经在英国喂鸽子的故事。所以这本书最终能到我手上的时候，我是有点不敢相信的…&lt;/p&gt;
&lt;p&gt;但无论如何隆重介绍一下还是需要的：《用户体验设计 本质、策略与经验》现已上市，各大网店（大概）有售，买不到可以看&lt;a href=&quot;http://www.epubit.com.cn/book/details/4317&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;这里&lt;/a&gt;。这是一本&lt;s&gt;男默女泪&lt;/s&gt;编辑不太想卖的书，因为看得人太多，那些什么经验分享教你做事的书就卖不出去了……&lt;br&gt;&lt;a id=&quot;more&quot;&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;这本书分8个章节讲了优秀杰出的设计师应有的能力和品质，当然不忘了在一开始先明确它所探讨的主旨。因为其实当今社会大概是名头称呼最混乱的年代，随便做点什么就可以叫XX师，不同人对于设计师都有着不同的看法，而且大家都以为自己以为的是对的，问题恰好是每个人都只对了一部分。这还不算是盲人摸象，因为“象”根本不存在。&lt;/p&gt;
&lt;p&gt;在现在的广义语境下，互联网行业中的“设计师”向着规划的方向一骑绝尘，它代表的是为了达成商业目标所做的一系列用户可见的努力。用户见不到一件产品的商业目标，但是达成商业目标需要用户的参与，简单来说就是，用户不掏钱，你就是白干。其实本来做每件事之前，都应该有一件策划，来构建这件事之所以达成的标的。但是在互联网的技术为王的光辉下，很多传统管理手段和策略都被掩盖了，这也是为什么设计师从小美工挣扎着要成为项目主导的原因。管理者还是在做管理者的工作，安排人事进度和成本；技术人员还是在做技术的工作，开发测试优化；但是设计师是绝不甘心于做个小美工的，他们想要构建出让用户舒服开心地把钱就掏了的世界。&lt;/p&gt;
&lt;p&gt;这本书说的就是这种有野心的设计师，应该具有的能力和品质。作者本身也希望这本书能帮助到同样有野心的人，和希望找到有如此野心人的HR们。&lt;/p&gt;
&lt;p&gt;开始我觉得这大哥说话又臭又长废话连篇，有点像语文阅读题的正确答案，但是在翻译的过程中，逐渐接触到的人事物让我意识到，他说的每一句话都是相当有价值的…因为业界就是这样，而我们需要帮助它变得更好。这是共赢，用户从中享受到生活的便利和更好的服务，企业从中获取更多的利润并有能力承担更多的社会责任。设计师就是这中间的斡旋者，调停人，找到彼此都乐见的平衡点。这就是设计师在设计之外需要拥有的能力，现如今，这一整套工作通常被称为用户体验设计。&lt;/p&gt;
&lt;p&gt;美工和底层程序员一样，就像餐厅里的传菜员或备餐员，你可能有能力同时给10桌上菜，可能有能力把土豆切成0.5mm直径的等长细丝，但这仍旧是餐厅里最底层的工作。他们在一定年限之后同样面对着竞争力下降的现实，找到自己的发展方向和出路，成为领班、大厨或者是酒店管理，方向可能不尽相同，但是都是用自己的能力影响更多人，帮助他们更好地生活。毕竟这都是第三产业，统称——服务业。&lt;/p&gt;
&lt;p&gt;…广告就这些， 我回去接着干活了（&lt;/p&gt;
</content>
    
    <summary type="html">
    
      &lt;p&gt;&lt;img src=&quot;http://7qnahw.com1.z0.glb.clouddn.com/IMG_20170510_193623_mix01.jpg&quot; alt=&quot;用户体验设计 本质、策略与经验&quot;&gt;&lt;br&gt;当编辑在群里问谁有兴趣翻译一本书的时候，我还没想过事情会变成这样。神坑腰斩何其多，更别提什么朝三暮四，或者昨天还是负责人，今天已经在英国喂鸽子的故事。所以这本书最终能到我手上的时候，我是有点不敢相信的…&lt;/p&gt;
&lt;p&gt;但无论如何隆重介绍一下还是需要的：《用户体验设计 本质、策略与经验》现已上市，各大网店（大概）有售，买不到可以看&lt;a href=&quot;http://www.epubit.com.cn/book/details/4317&quot;&gt;这里&lt;/a&gt;。这是一本&lt;s&gt;男默女泪&lt;/s&gt;编辑不太想卖的书，因为看得人太多，那些什么经验分享教你做事的书就卖不出去了……&lt;br&gt;
    
    </summary>
    
    
      <category term="看书" scheme="http://hikarievo.me/tags/%E7%9C%8B%E4%B9%A6/"/>
    
      <category term="设计" scheme="http://hikarievo.me/tags/%E8%AE%BE%E8%AE%A1/"/>
    
      <category term="推荐" scheme="http://hikarievo.me/tags/%E6%8E%A8%E8%8D%90/"/>
    
  </entry>
  
  <entry>
    <title>只用CSS绘制雷达图</title>
    <link href="http://hikarievo.me/2017/02/02/draw-pure-css-hexagon-radar-chart/"/>
    <id>http://hikarievo.me/2017/02/02/draw-pure-css-hexagon-radar-chart/</id>
    <published>2017-02-02T08:05:50.000Z</published>
    <updated>2017-02-04T15:14:03.343Z</updated>
    
    <content type="html">&lt;p&gt;最近做游戏资料经常要描述六围，现在比较流行的做法就是用六围图，但是资料库系统限制导致外挂JS库或者JS代码比较麻烦，何况秉承着能用CSS绝不用JS的思路，于是想着看能不能用CSS做六围图…&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;http://www.nintendo.com.hk/pressrelease/images/20170124_pokemon_bank_update/vc_poke_transfer_ss4.jpg&quot; alt=&quot;就不告诉你是什么游戏&quot;&gt;&lt;/p&gt;
&lt;p&gt;做出来差不多就是这样了：&lt;/p&gt;
&lt;p&gt;&lt;/p&gt;&lt;p data-height=&quot;265&quot; data-theme-id=&quot;light&quot; data-slug-hash=&quot;KaowyW&quot; data-default-tab=&quot;result&quot; data-user=&quot;hikarievo&quot; data-embed-version=&quot;2&quot; data-pen-title=&quot;Pure CSS hexagon radar chart&quot; class=&quot;codepen&quot;&gt;在&lt;a href=&quot;http://codepen.io&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;CodePen&lt;/a&gt;上查看&lt;a href=&quot;http://codepen.io/hikarievo/pen/KaowyW/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;纯CSS六边形雷达图&lt;/a&gt;(&lt;a href=&quot;http://codepen.io/hikarievo&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;@hikarievo&lt;/a&gt;)。&lt;/p&gt;&lt;p&gt;&lt;/p&gt;
&lt;script async src=&quot;https://production-assets.codepen.io/assets/embed/ei.js&quot;&gt;&lt;/script&gt;

&lt;p&gt;顺带一提，这玩意儿的学名叫雷达图…我搜什么六边形图标啊六围图啊都搜不到快急死我了……&lt;br&gt;&lt;a id=&quot;more&quot;&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h2 id=&quot;基本思路&quot;&gt;&lt;a href=&quot;#基本思路&quot; class=&quot;headerlink&quot; title=&quot;基本思路&quot;&gt;&lt;/a&gt;基本思路&lt;/h2&gt;&lt;p&gt;六围图通常是一个不规则六边形（6V选手一边去），我们已知的值就是顶点到中心的距离，而将所有的顶点与中心点连接起来之后，我们就得到了6个已知的三角形（已知两个邻边长度及其夹角就可以确定一个三角形…如果背过三角形相似/全等规则的话大概会想起SAS）。&lt;/p&gt;
&lt;p&gt;CSS画三角本身并不困难，使用一个DOM元素加上一些CSS代码就&lt;a href=&quot;http://triangle.designyourcode.io/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;可以画出任意三角形&lt;/a&gt;。但是这些三角形要么无法固定夹角度数，要么无法满足邻边长度的要求（简单来说，就是无法画出钝角三角形），所以我将目光转移到了CSS &lt;code&gt;transform&lt;/code&gt;。如果先画出一个邻边长度满足要求的直角三角形，再把直角扭成所需圆心角的度数不就OK了嘛。一开始我想用&lt;code&gt;skew()&lt;/code&gt;来解决这个问题，但是&lt;code&gt;skew()&lt;/code&gt;是斜切，也就是说，在保持DOM面积不变（高度不变）的情况下，倾斜元素。但是我需要的是&lt;strong&gt;保持两边边长不变，倾斜元素&lt;/strong&gt;…所以已知的CSS &lt;code&gt;transform&lt;/code&gt;简易方法都阵亡了。于是只好祭出&lt;code&gt;transform&lt;/code&gt;的最终杀器——&lt;code&gt;matrix()&lt;/code&gt;（&lt;del&gt;黑客帝国&lt;/del&gt;矩阵变换），理论上&lt;code&gt;matrix()&lt;/code&gt;可以完成任何线性变换，非常适合这种场合。 &lt;/p&gt;
&lt;p&gt;基本操作思路如下：&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;按照给定边长绘制直角三角形。&lt;/li&gt;
&lt;li&gt;使用&lt;code&gt;matrix()&lt;/code&gt;将直角三角形的直角扭成所需的圆心角。&lt;/li&gt;
&lt;li&gt;依次旋转所得的三角形。&lt;/li&gt;
&lt;/ol&gt;
&lt;h2 id=&quot;计算矩阵&quot;&gt;&lt;a href=&quot;#计算矩阵&quot; class=&quot;headerlink&quot; title=&quot;计算矩阵&quot;&gt;&lt;/a&gt;计算矩阵&lt;/h2&gt;&lt;p&gt;…思路就是要跳跃，画直角三角形随便摆弄一下上面的&lt;a href=&quot;http://triangle.designyourcode.io/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;生成器&lt;/a&gt;就能搞定了。问题在于矩阵要怎么办…矩阵变换听起来挺复杂的，其实只要搞明白写法就OK了。&lt;/p&gt;
&lt;p&gt;&lt;code&gt;matrix()&lt;/code&gt;需要提供6个参数，从a到f，转换成矩阵如下：&lt;br&gt;&lt;span class=&quot;katex-display&quot;&gt;&lt;span class=&quot;katex&quot;&gt;&lt;span class=&quot;katex-mathml&quot;&gt;&lt;math&gt;&lt;semantics&gt;&lt;mrow&gt;&lt;mrow&gt;&lt;mo fence=&quot;true&quot;&gt;[&lt;/mo&gt;&lt;mtable&gt;&lt;mtr&gt;&lt;mtd&gt;&lt;mrow&gt;&lt;mi&gt;a&lt;/mi&gt;&lt;/mrow&gt;&lt;/mtd&gt;&lt;mtd&gt;&lt;mrow&gt;&lt;mi&gt;c&lt;/mi&gt;&lt;/mrow&gt;&lt;/mtd&gt;&lt;mtd&gt;&lt;mrow&gt;&lt;mi&gt;e&lt;/mi&gt;&lt;/mrow&gt;&lt;/mtd&gt;&lt;/mtr&gt;&lt;mtr&gt;&lt;mtd&gt;&lt;mrow&gt;&lt;mi&gt;b&lt;/mi&gt;&lt;/mrow&gt;&lt;/mtd&gt;&lt;mtd&gt;&lt;mrow&gt;&lt;mi&gt;d&lt;/mi&gt;&lt;/mrow&gt;&lt;/mtd&gt;&lt;mtd&gt;&lt;mrow&gt;&lt;mi&gt;f&lt;/mi&gt;&lt;/mrow&gt;&lt;/mtd&gt;&lt;/mtr&gt;&lt;mtr&gt;&lt;mtd&gt;&lt;mrow&gt;&lt;mn&gt;0&lt;/mn&gt;&lt;/mrow&gt;&lt;/mtd&gt;&lt;mtd&gt;&lt;mrow&gt;&lt;mn&gt;0&lt;/mn&gt;&lt;/mrow&gt;&lt;/mtd&gt;&lt;mtd&gt;&lt;mrow&gt;&lt;mn&gt;1&lt;/mn&gt;&lt;/mrow&gt;&lt;/mtd&gt;&lt;/mtr&gt;&lt;/mtable&gt;&lt;mo fence=&quot;true&quot;&gt;]&lt;/mo&gt;&lt;/mrow&gt;&lt;mo&gt;⋅&lt;/mo&gt;&lt;mrow&gt;&lt;mo fence=&quot;true&quot;&gt;[&lt;/mo&gt;&lt;mtable&gt;&lt;mtr&gt;&lt;mtd&gt;&lt;mrow&gt;&lt;mi&gt;x&lt;/mi&gt;&lt;/mrow&gt;&lt;/mtd&gt;&lt;/mtr&gt;&lt;mtr&gt;&lt;mtd&gt;&lt;mrow&gt;&lt;mi&gt;y&lt;/mi&gt;&lt;/mrow&gt;&lt;/mtd&gt;&lt;/mtr&gt;&lt;mtr&gt;&lt;mtd&gt;&lt;mrow&gt;&lt;mn&gt;1&lt;/mn&gt;&lt;/mrow&gt;&lt;/mtd&gt;&lt;/mtr&gt;&lt;/mtable&gt;&lt;mo fence=&quot;true&quot;&gt;]&lt;/mo&gt;&lt;/mrow&gt;&lt;mo&gt;=&lt;/mo&gt;&lt;mrow&gt;&lt;mo fence=&quot;true&quot;&gt;[&lt;/mo&gt;&lt;mtable&gt;&lt;mtr&gt;&lt;mtd&gt;&lt;mrow&gt;&lt;mi&gt;a&lt;/mi&gt;&lt;mi&gt;x&lt;/mi&gt;&lt;mo&gt;+&lt;/mo&gt;&lt;mi&gt;c&lt;/mi&gt;&lt;mi&gt;y&lt;/mi&gt;&lt;mo&gt;+&lt;/mo&gt;&lt;mi&gt;e&lt;/mi&gt;&lt;/mrow&gt;&lt;/mtd&gt;&lt;/mtr&gt;&lt;mtr&gt;&lt;mtd&gt;&lt;mrow&gt;&lt;mi&gt;b&lt;/mi&gt;&lt;mi&gt;x&lt;/mi&gt;&lt;mo&gt;+&lt;/mo&gt;&lt;mi&gt;d&lt;/mi&gt;&lt;mi&gt;y&lt;/mi&gt;&lt;mo&gt;+&lt;/mo&gt;&lt;mi&gt;f&lt;/mi&gt;&lt;/mrow&gt;&lt;/mtd&gt;&lt;/mtr&gt;&lt;mtr&gt;&lt;mtd&gt;&lt;mrow&gt;&lt;mn&gt;1&lt;/mn&gt;&lt;/mrow&gt;&lt;/mtd&gt;&lt;/mtr&gt;&lt;/mtable&gt;&lt;mo fence=&quot;true&quot;&gt;]&lt;/mo&gt;&lt;/mrow&gt;&lt;/mrow&gt;&lt;annotation encoding=&quot;application/x-tex&quot;&gt;\begin{bmatrix}
  a &amp;amp; c &amp;amp; e \\
  b &amp;amp; d &amp;amp; f \\
  0 &amp;amp; 0 &amp;amp; 1 
\end{bmatrix}
\cdot
\begin{bmatrix}
  x \\
  y \\
  1 
\end{bmatrix}
=
\begin{bmatrix}
  ax + cy + e \\
  bx + dy + f \\
  1 
\end{bmatrix}&lt;/annotation&gt;&lt;/semantics&gt;&lt;/math&gt;&lt;/span&gt;&lt;span class=&quot;katex-html&quot; aria-hidden=&quot;true&quot;&gt;&lt;span class=&quot;strut&quot; style=&quot;height:2.05002em;&quot;&gt;&lt;/span&gt;&lt;span class=&quot;strut bottom&quot; style=&quot;height:3.60004em;vertical-align:-1.55002em;&quot;&gt;&lt;/span&gt;&lt;span class=&quot;base displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;minner displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;style-wrap reset-textstyle textstyle uncramped&quot;&gt;&lt;span class=&quot;delimsizing mult&quot;&gt;&lt;span class=&quot;vlist&quot;&gt;&lt;span style=&quot;top:0.9049999999999999em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;delimsizinginner delim-size4&quot;&gt;&lt;span&gt;⎣&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;top:-0.89502em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;delimsizinginner delim-size4&quot;&gt;&lt;span&gt;⎡&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;baseline-fix&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord&quot;&gt;&lt;span class=&quot;mtable&quot;&gt;&lt;span class=&quot;col-align-c&quot;&gt;&lt;span class=&quot;vlist&quot;&gt;&lt;span style=&quot;top:-1.2099999999999997em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;mord mathit&quot;&gt;a&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;top:-0.00999999999999951em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;mord mathit&quot;&gt;b&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;top:1.1900000000000006em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;mord mathrm&quot;&gt;0&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;baseline-fix&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;arraycolsep&quot; style=&quot;width:0.5em;&quot;&gt;&lt;/span&gt;&lt;span class=&quot;arraycolsep&quot; style=&quot;width:0.5em;&quot;&gt;&lt;/span&gt;&lt;span class=&quot;col-align-c&quot;&gt;&lt;span class=&quot;vlist&quot;&gt;&lt;span style=&quot;top:-1.2099999999999997em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;mord mathit&quot;&gt;c&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;top:-0.00999999999999951em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;mord mathit&quot;&gt;d&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;top:1.1900000000000006em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;mord mathrm&quot;&gt;0&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;baseline-fix&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;arraycolsep&quot; style=&quot;width:0.5em;&quot;&gt;&lt;/span&gt;&lt;span class=&quot;arraycolsep&quot; style=&quot;width:0.5em;&quot;&gt;&lt;/span&gt;&lt;span class=&quot;col-align-c&quot;&gt;&lt;span class=&quot;vlist&quot;&gt;&lt;span style=&quot;top:-1.2099999999999997em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;mord mathit&quot;&gt;e&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;top:-0.00999999999999951em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;mord mathit&quot; style=&quot;margin-right:0.10764em;&quot;&gt;f&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;top:1.1900000000000006em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;mord mathrm&quot;&gt;1&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;baseline-fix&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;style-wrap reset-textstyle textstyle uncramped&quot;&gt;&lt;span class=&quot;delimsizing mult&quot;&gt;&lt;span class=&quot;vlist&quot;&gt;&lt;span style=&quot;top:0.9049999999999999em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;delimsizinginner delim-size4&quot;&gt;&lt;span&gt;⎦&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;top:-0.89502em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;delimsizinginner delim-size4&quot;&gt;&lt;span&gt;⎤&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;baseline-fix&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mbin&quot;&gt;⋅&lt;/span&gt;&lt;span class=&quot;minner displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;style-wrap reset-textstyle textstyle uncramped&quot;&gt;&lt;span class=&quot;delimsizing mult&quot;&gt;&lt;span class=&quot;vlist&quot;&gt;&lt;span style=&quot;top:0.9049999999999999em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;delimsizinginner delim-size4&quot;&gt;&lt;span&gt;⎣&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;top:-0.89502em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;delimsizinginner delim-size4&quot;&gt;&lt;span&gt;⎡&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;baseline-fix&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord&quot;&gt;&lt;span class=&quot;mtable&quot;&gt;&lt;span class=&quot;col-align-c&quot;&gt;&lt;span class=&quot;vlist&quot;&gt;&lt;span style=&quot;top:-1.2099999999999997em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;mord mathit&quot;&gt;x&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;top:-0.00999999999999951em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;mord mathit&quot; style=&quot;margin-right:0.03588em;&quot;&gt;y&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;top:1.1900000000000006em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;mord mathrm&quot;&gt;1&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;baseline-fix&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;style-wrap reset-textstyle textstyle uncramped&quot;&gt;&lt;span class=&quot;delimsizing mult&quot;&gt;&lt;span class=&quot;vlist&quot;&gt;&lt;span style=&quot;top:0.9049999999999999em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;delimsizinginner delim-size4&quot;&gt;&lt;span&gt;⎦&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;top:-0.89502em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;delimsizinginner delim-size4&quot;&gt;&lt;span&gt;⎤&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;baseline-fix&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mrel&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;minner displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;style-wrap reset-textstyle textstyle uncramped&quot;&gt;&lt;span class=&quot;delimsizing mult&quot;&gt;&lt;span class=&quot;vlist&quot;&gt;&lt;span style=&quot;top:0.9049999999999999em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;delimsizinginner delim-size4&quot;&gt;&lt;span&gt;⎣&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;top:-0.89502em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;delimsizinginner delim-size4&quot;&gt;&lt;span&gt;⎡&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;baseline-fix&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord&quot;&gt;&lt;span class=&quot;mtable&quot;&gt;&lt;span class=&quot;col-align-c&quot;&gt;&lt;span class=&quot;vlist&quot;&gt;&lt;span style=&quot;top:-1.2099999999999997em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;mord mathit&quot;&gt;a&lt;/span&gt;&lt;span class=&quot;mord mathit&quot;&gt;x&lt;/span&gt;&lt;span class=&quot;mbin&quot;&gt;+&lt;/span&gt;&lt;span class=&quot;mord mathit&quot;&gt;c&lt;/span&gt;&lt;span class=&quot;mord mathit&quot; style=&quot;margin-right:0.03588em;&quot;&gt;y&lt;/span&gt;&lt;span class=&quot;mbin&quot;&gt;+&lt;/span&gt;&lt;span class=&quot;mord mathit&quot;&gt;e&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;top:-0.00999999999999951em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;mord mathit&quot;&gt;b&lt;/span&gt;&lt;span class=&quot;mord mathit&quot;&gt;x&lt;/span&gt;&lt;span class=&quot;mbin&quot;&gt;+&lt;/span&gt;&lt;span class=&quot;mord mathit&quot;&gt;d&lt;/span&gt;&lt;span class=&quot;mord mathit&quot; style=&quot;margin-right:0.03588em;&quot;&gt;y&lt;/span&gt;&lt;span class=&quot;mbin&quot;&gt;+&lt;/span&gt;&lt;span class=&quot;mord mathit&quot; style=&quot;margin-right:0.10764em;&quot;&gt;f&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;top:1.1900000000000006em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;mord mathrm&quot;&gt;1&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;baseline-fix&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;style-wrap reset-textstyle textstyle uncramped&quot;&gt;&lt;span class=&quot;delimsizing mult&quot;&gt;&lt;span class=&quot;vlist&quot;&gt;&lt;span style=&quot;top:0.9049999999999999em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;delimsizinginner delim-size4&quot;&gt;&lt;span&gt;⎦&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;top:-0.89502em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;delimsizinginner delim-size4&quot;&gt;&lt;span&gt;⎤&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;baseline-fix&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;转换成我们熟悉的方式写成方程组的话，就是：&lt;/p&gt;
&lt;span class=&quot;katex-display&quot;&gt;&lt;span class=&quot;katex&quot;&gt;&lt;span class=&quot;katex-mathml&quot;&gt;&lt;math&gt;&lt;semantics&gt;&lt;mrow&gt;&lt;mrow&gt;&lt;mo fence=&quot;true&quot;&gt;{&lt;/mo&gt;&lt;mtable&gt;&lt;mtr&gt;&lt;mtd&gt;&lt;mrow&gt;&lt;msup&gt;&lt;mi&gt;x&lt;/mi&gt;&lt;mrow&gt;&lt;msup&gt;&lt;mrow&gt;&lt;/mrow&gt;&lt;mrow&gt;&lt;mi mathvariant=&quot;normal&quot;&gt;′&lt;/mi&gt;&lt;/mrow&gt;&lt;/msup&gt;&lt;/mrow&gt;&lt;/msup&gt;&lt;/mrow&gt;&lt;/mtd&gt;&lt;mtd&gt;&lt;mrow&gt;&lt;mrow&gt;&lt;/mrow&gt;&lt;mo&gt;=&lt;/mo&gt;&lt;/mrow&gt;&lt;/mtd&gt;&lt;mtd&gt;&lt;mrow&gt;&lt;mi&gt;a&lt;/mi&gt;&lt;mi&gt;x&lt;/mi&gt;&lt;mo&gt;+&lt;/mo&gt;&lt;mi&gt;c&lt;/mi&gt;&lt;mi&gt;y&lt;/mi&gt;&lt;mo&gt;+&lt;/mo&gt;&lt;mi&gt;e&lt;/mi&gt;&lt;/mrow&gt;&lt;/mtd&gt;&lt;/mtr&gt;&lt;mtr&gt;&lt;mtd&gt;&lt;mrow&gt;&lt;msup&gt;&lt;mi&gt;y&lt;/mi&gt;&lt;mrow&gt;&lt;msup&gt;&lt;mrow&gt;&lt;/mrow&gt;&lt;mrow&gt;&lt;mi mathvariant=&quot;normal&quot;&gt;′&lt;/mi&gt;&lt;/mrow&gt;&lt;/msup&gt;&lt;/mrow&gt;&lt;/msup&gt;&lt;/mrow&gt;&lt;/mtd&gt;&lt;mtd&gt;&lt;mrow&gt;&lt;mrow&gt;&lt;/mrow&gt;&lt;mo&gt;=&lt;/mo&gt;&lt;/mrow&gt;&lt;/mtd&gt;&lt;mtd&gt;&lt;mrow&gt;&lt;mi&gt;b&lt;/mi&gt;&lt;mi&gt;x&lt;/mi&gt;&lt;mo&gt;+&lt;/mo&gt;&lt;mi&gt;d&lt;/mi&gt;&lt;mi&gt;y&lt;/mi&gt;&lt;mo&gt;+&lt;/mo&gt;&lt;mi&gt;f&lt;/mi&gt;&lt;/mrow&gt;&lt;/mtd&gt;&lt;/mtr&gt;&lt;/mtable&gt;&lt;/mrow&gt;&lt;/mrow&gt;&lt;annotation encoding=&quot;application/x-tex&quot;&gt;\left\{
\begin{aligned}
x^{&amp;#x27;} &amp;amp; = &amp;amp; ax + cy + e \\
y^{&amp;#x27;} &amp;amp; = &amp;amp; bx + dy + f 
\end{aligned}
\right.&lt;/annotation&gt;&lt;/semantics&gt;&lt;/math&gt;&lt;/span&gt;&lt;span class=&quot;katex-html&quot; aria-hidden=&quot;true&quot;&gt;&lt;span class=&quot;strut&quot; style=&quot;height:1.55488em;&quot;&gt;&lt;/span&gt;&lt;span class=&quot;strut bottom&quot; style=&quot;height:2.6097600000000005em;vertical-align:-1.0548800000000005em;&quot;&gt;&lt;/span&gt;&lt;span class=&quot;base displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;minner displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;style-wrap reset-textstyle textstyle uncramped&quot; style=&quot;top:0em;&quot;&gt;&lt;span class=&quot;delimsizing size3&quot;&gt;{&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord&quot;&gt;&lt;span class=&quot;mtable&quot;&gt;&lt;span class=&quot;col-align-r&quot;&gt;&lt;span class=&quot;vlist&quot;&gt;&lt;span style=&quot;top:-0.6100000000000001em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;mord&quot;&gt;&lt;span class=&quot;mord mathit&quot;&gt;x&lt;/span&gt;&lt;span class=&quot;vlist&quot;&gt;&lt;span style=&quot;top:-0.413em;margin-right:0.05em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;reset-textstyle scriptstyle uncramped&quot;&gt;&lt;span class=&quot;mord scriptstyle uncramped&quot;&gt;&lt;span class=&quot;mord&quot;&gt;&lt;span&gt;&lt;/span&gt;&lt;span class=&quot;vlist&quot;&gt;&lt;span style=&quot;top:-0.363em;margin-right:0.07142857142857144em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;reset-scriptstyle scriptscriptstyle uncramped&quot;&gt;&lt;span class=&quot;mord scriptscriptstyle uncramped&quot;&gt;&lt;span class=&quot;mord mathrm&quot;&gt;′&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;baseline-fix&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;baseline-fix&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;top:0.6948800000000004em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;mord&quot;&gt;&lt;span class=&quot;mord mathit&quot; style=&quot;margin-right:0.03588em;&quot;&gt;y&lt;/span&gt;&lt;span class=&quot;vlist&quot;&gt;&lt;span style=&quot;top:-0.413em;margin-right:0.05em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;reset-textstyle scriptstyle uncramped&quot;&gt;&lt;span class=&quot;mord scriptstyle uncramped&quot;&gt;&lt;span class=&quot;mord&quot;&gt;&lt;span&gt;&lt;/span&gt;&lt;span class=&quot;vlist&quot;&gt;&lt;span style=&quot;top:-0.363em;margin-right:0.07142857142857144em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;reset-scriptstyle scriptscriptstyle uncramped&quot;&gt;&lt;span class=&quot;mord scriptscriptstyle uncramped&quot;&gt;&lt;span class=&quot;mord mathrm&quot;&gt;′&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;baseline-fix&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;baseline-fix&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;baseline-fix&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;col-align-l&quot;&gt;&lt;span class=&quot;vlist&quot;&gt;&lt;span style=&quot;top:-0.6100000000000001em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;mord displaystyle textstyle uncramped&quot;&gt;&lt;/span&gt;&lt;span class=&quot;mrel&quot;&gt;=&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;top:0.6948800000000004em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;mord displaystyle textstyle uncramped&quot;&gt;&lt;/span&gt;&lt;span class=&quot;mrel&quot;&gt;=&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;baseline-fix&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;arraycolsep&quot; style=&quot;width:2em;&quot;&gt;&lt;/span&gt;&lt;span class=&quot;col-align-r&quot;&gt;&lt;span class=&quot;vlist&quot;&gt;&lt;span style=&quot;top:-0.6100000000000001em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;mord mathit&quot;&gt;a&lt;/span&gt;&lt;span class=&quot;mord mathit&quot;&gt;x&lt;/span&gt;&lt;span class=&quot;mbin&quot;&gt;+&lt;/span&gt;&lt;span class=&quot;mord mathit&quot;&gt;c&lt;/span&gt;&lt;span class=&quot;mord mathit&quot; style=&quot;margin-right:0.03588em;&quot;&gt;y&lt;/span&gt;&lt;span class=&quot;mbin&quot;&gt;+&lt;/span&gt;&lt;span class=&quot;mord mathit&quot;&gt;e&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;top:0.6948800000000004em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;mord mathit&quot;&gt;b&lt;/span&gt;&lt;span class=&quot;mord mathit&quot;&gt;x&lt;/span&gt;&lt;span class=&quot;mbin&quot;&gt;+&lt;/span&gt;&lt;span class=&quot;mord mathit&quot;&gt;d&lt;/span&gt;&lt;span class=&quot;mord mathit&quot; style=&quot;margin-right:0.03588em;&quot;&gt;y&lt;/span&gt;&lt;span class=&quot;mbin&quot;&gt;+&lt;/span&gt;&lt;span class=&quot;mord mathit&quot; style=&quot;margin-right:0.10764em;&quot;&gt;f&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;baseline-fix&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;sizing reset-size5 size5 reset-textstyle textstyle uncramped nulldelimiter&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;
&lt;p&gt;然后我们的变换是这样的（画的平行四边形，三角形的部分是实线画起来的部分…从红色的矩形变成蓝色的平行四边形）：&lt;/p&gt;
&lt;iframe src=&quot;https://www.desmos.com/calculator/eus1dm76qx?embed&quot; width=&quot;90%&quot; height=&quot;350px&quot; style=&quot;border: 1px solid #ccc&quot; frameborder=&quot;0&quot;&gt;&lt;/iframe&gt;

&lt;p&gt;在这里我出了点小小的思路上的问题，在准备这篇文章的时候才发现…主要是我还保留着&lt;code&gt;skew()&lt;/code&gt;的思路，而且当时心想着反正都是转，转几圈都是转…导致多转了一次，这个回头说。&lt;/p&gt;
&lt;p&gt;根据上面的图解出来（解方程的时候发生了一场惨剧…按习惯画坐标轴都是右上为正，左下为负，可是我忘了！忘了！CSS渲染下的Y轴方向是向下的！向下的！！导致我对着一个方程算了俩钟头，怎么算都是反的！！）：&lt;/p&gt;
&lt;span class=&quot;katex-display&quot;&gt;&lt;span class=&quot;katex&quot;&gt;&lt;span class=&quot;katex-mathml&quot;&gt;&lt;math&gt;&lt;semantics&gt;&lt;mrow&gt;&lt;mrow&gt;&lt;mo fence=&quot;true&quot;&gt;{&lt;/mo&gt;&lt;mtable&gt;&lt;mtr&gt;&lt;mtd&gt;&lt;mrow&gt;&lt;msup&gt;&lt;mi&gt;x&lt;/mi&gt;&lt;mrow&gt;&lt;msup&gt;&lt;mrow&gt;&lt;/mrow&gt;&lt;mrow&gt;&lt;mi mathvariant=&quot;normal&quot;&gt;′&lt;/mi&gt;&lt;/mrow&gt;&lt;/msup&gt;&lt;/mrow&gt;&lt;/msup&gt;&lt;/mrow&gt;&lt;/mtd&gt;&lt;mtd&gt;&lt;mrow&gt;&lt;mrow&gt;&lt;/mrow&gt;&lt;mo&gt;=&lt;/mo&gt;&lt;/mrow&gt;&lt;/mtd&gt;&lt;mtd&gt;&lt;mrow&gt;&lt;mi&gt;x&lt;/mi&gt;&lt;mo&gt;−&lt;/mo&gt;&lt;mi&gt;sin&lt;/mi&gt;&lt;mi&gt;θ&lt;/mi&gt;&lt;mo&gt;⋅&lt;/mo&gt;&lt;mi&gt;y&lt;/mi&gt;&lt;/mrow&gt;&lt;/mtd&gt;&lt;/mtr&gt;&lt;mtr&gt;&lt;mtd&gt;&lt;mrow&gt;&lt;msup&gt;&lt;mi&gt;y&lt;/mi&gt;&lt;mrow&gt;&lt;msup&gt;&lt;mrow&gt;&lt;/mrow&gt;&lt;mrow&gt;&lt;mi mathvariant=&quot;normal&quot;&gt;′&lt;/mi&gt;&lt;/mrow&gt;&lt;/msup&gt;&lt;/mrow&gt;&lt;/msup&gt;&lt;/mrow&gt;&lt;/mtd&gt;&lt;mtd&gt;&lt;mrow&gt;&lt;mrow&gt;&lt;/mrow&gt;&lt;mo&gt;=&lt;/mo&gt;&lt;/mrow&gt;&lt;/mtd&gt;&lt;mtd&gt;&lt;mrow&gt;&lt;mi&gt;cos&lt;/mi&gt;&lt;mi&gt;θ&lt;/mi&gt;&lt;mo&gt;⋅&lt;/mo&gt;&lt;mi&gt;y&lt;/mi&gt;&lt;/mrow&gt;&lt;/mtd&gt;&lt;/mtr&gt;&lt;/mtable&gt;&lt;/mrow&gt;&lt;/mrow&gt;&lt;annotation encoding=&quot;application/x-tex&quot;&gt;\left\{
\begin{aligned}
x^{&amp;#x27;} &amp;amp; = &amp;amp; x - \sin\theta \cdot y \\
y^{&amp;#x27;} &amp;amp; = &amp;amp; \cos\theta\cdot y 
\end{aligned}
\right.&lt;/annotation&gt;&lt;/semantics&gt;&lt;/math&gt;&lt;/span&gt;&lt;span class=&quot;katex-html&quot; aria-hidden=&quot;true&quot;&gt;&lt;span class=&quot;strut&quot; style=&quot;height:1.55488em;&quot;&gt;&lt;/span&gt;&lt;span class=&quot;strut bottom&quot; style=&quot;height:2.6097600000000005em;vertical-align:-1.0548800000000005em;&quot;&gt;&lt;/span&gt;&lt;span class=&quot;base displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;minner displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;style-wrap reset-textstyle textstyle uncramped&quot; style=&quot;top:0em;&quot;&gt;&lt;span class=&quot;delimsizing size3&quot;&gt;{&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord&quot;&gt;&lt;span class=&quot;mtable&quot;&gt;&lt;span class=&quot;col-align-r&quot;&gt;&lt;span class=&quot;vlist&quot;&gt;&lt;span style=&quot;top:-0.6100000000000001em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;mord&quot;&gt;&lt;span class=&quot;mord mathit&quot;&gt;x&lt;/span&gt;&lt;span class=&quot;vlist&quot;&gt;&lt;span style=&quot;top:-0.413em;margin-right:0.05em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;reset-textstyle scriptstyle uncramped&quot;&gt;&lt;span class=&quot;mord scriptstyle uncramped&quot;&gt;&lt;span class=&quot;mord&quot;&gt;&lt;span&gt;&lt;/span&gt;&lt;span class=&quot;vlist&quot;&gt;&lt;span style=&quot;top:-0.363em;margin-right:0.07142857142857144em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;reset-scriptstyle scriptscriptstyle uncramped&quot;&gt;&lt;span class=&quot;mord scriptscriptstyle uncramped&quot;&gt;&lt;span class=&quot;mord mathrm&quot;&gt;′&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;baseline-fix&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;baseline-fix&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;top:0.6948800000000004em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;mord&quot;&gt;&lt;span class=&quot;mord mathit&quot; style=&quot;margin-right:0.03588em;&quot;&gt;y&lt;/span&gt;&lt;span class=&quot;vlist&quot;&gt;&lt;span style=&quot;top:-0.413em;margin-right:0.05em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;reset-textstyle scriptstyle uncramped&quot;&gt;&lt;span class=&quot;mord scriptstyle uncramped&quot;&gt;&lt;span class=&quot;mord&quot;&gt;&lt;span&gt;&lt;/span&gt;&lt;span class=&quot;vlist&quot;&gt;&lt;span style=&quot;top:-0.363em;margin-right:0.07142857142857144em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;reset-scriptstyle scriptscriptstyle uncramped&quot;&gt;&lt;span class=&quot;mord scriptscriptstyle uncramped&quot;&gt;&lt;span class=&quot;mord mathrm&quot;&gt;′&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;baseline-fix&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;baseline-fix&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;baseline-fix&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;col-align-l&quot;&gt;&lt;span class=&quot;vlist&quot;&gt;&lt;span style=&quot;top:-0.6100000000000001em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;mord displaystyle textstyle uncramped&quot;&gt;&lt;/span&gt;&lt;span class=&quot;mrel&quot;&gt;=&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;top:0.6948800000000004em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;mord displaystyle textstyle uncramped&quot;&gt;&lt;/span&gt;&lt;span class=&quot;mrel&quot;&gt;=&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;baseline-fix&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;arraycolsep&quot; style=&quot;width:2em;&quot;&gt;&lt;/span&gt;&lt;span class=&quot;col-align-r&quot;&gt;&lt;span class=&quot;vlist&quot;&gt;&lt;span style=&quot;top:-0.6100000000000001em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;mord mathit&quot;&gt;x&lt;/span&gt;&lt;span class=&quot;mbin&quot;&gt;−&lt;/span&gt;&lt;span class=&quot;mop&quot;&gt;sin&lt;/span&gt;&lt;span class=&quot;mord mathit&quot; style=&quot;margin-right:0.02778em;&quot;&gt;θ&lt;/span&gt;&lt;span class=&quot;mbin&quot;&gt;⋅&lt;/span&gt;&lt;span class=&quot;mord mathit&quot; style=&quot;margin-right:0.03588em;&quot;&gt;y&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;top:0.6948800000000004em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;mop&quot;&gt;cos&lt;/span&gt;&lt;span class=&quot;mord mathit&quot; style=&quot;margin-right:0.02778em;&quot;&gt;θ&lt;/span&gt;&lt;span class=&quot;mbin&quot;&gt;⋅&lt;/span&gt;&lt;span class=&quot;mord mathit&quot; style=&quot;margin-right:0.03588em;&quot;&gt;y&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;baseline-fix&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;sizing reset-size5 size5 reset-textstyle textstyle uncramped nulldelimiter&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;
&lt;p&gt;代入a~f得到&lt;br&gt;&lt;span class=&quot;katex-display&quot;&gt;&lt;span class=&quot;katex&quot;&gt;&lt;span class=&quot;katex-mathml&quot;&gt;&lt;math&gt;&lt;semantics&gt;&lt;mrow&gt;&lt;mrow&gt;&lt;mo fence=&quot;true&quot;&gt;[&lt;/mo&gt;&lt;mtable&gt;&lt;mtr&gt;&lt;mtd&gt;&lt;mrow&gt;&lt;mn&gt;1&lt;/mn&gt;&lt;/mrow&gt;&lt;/mtd&gt;&lt;mtd&gt;&lt;mrow&gt;&lt;mo&gt;−&lt;/mo&gt;&lt;mi&gt;sin&lt;/mi&gt;&lt;mi&gt;θ&lt;/mi&gt;&lt;/mrow&gt;&lt;/mtd&gt;&lt;mtd&gt;&lt;mrow&gt;&lt;mn&gt;0&lt;/mn&gt;&lt;/mrow&gt;&lt;/mtd&gt;&lt;/mtr&gt;&lt;mtr&gt;&lt;mtd&gt;&lt;mrow&gt;&lt;mn&gt;0&lt;/mn&gt;&lt;/mrow&gt;&lt;/mtd&gt;&lt;mtd&gt;&lt;mrow&gt;&lt;mi&gt;cos&lt;/mi&gt;&lt;mi&gt;θ&lt;/mi&gt;&lt;/mrow&gt;&lt;/mtd&gt;&lt;mtd&gt;&lt;mrow&gt;&lt;mn&gt;0&lt;/mn&gt;&lt;/mrow&gt;&lt;/mtd&gt;&lt;/mtr&gt;&lt;mtr&gt;&lt;mtd&gt;&lt;mrow&gt;&lt;mn&gt;0&lt;/mn&gt;&lt;/mrow&gt;&lt;/mtd&gt;&lt;mtd&gt;&lt;mrow&gt;&lt;mn&gt;0&lt;/mn&gt;&lt;/mrow&gt;&lt;/mtd&gt;&lt;mtd&gt;&lt;mrow&gt;&lt;mn&gt;1&lt;/mn&gt;&lt;/mrow&gt;&lt;/mtd&gt;&lt;/mtr&gt;&lt;/mtable&gt;&lt;mo fence=&quot;true&quot;&gt;]&lt;/mo&gt;&lt;/mrow&gt;&lt;/mrow&gt;&lt;annotation encoding=&quot;application/x-tex&quot;&gt;\begin{bmatrix}
  1 &amp;amp; - \sin\theta &amp;amp; 0 \\
  0 &amp;amp; \cos\theta &amp;amp; 0 \\
  0 &amp;amp; 0 &amp;amp; 1 
\end{bmatrix}&lt;/annotation&gt;&lt;/semantics&gt;&lt;/math&gt;&lt;/span&gt;&lt;span class=&quot;katex-html&quot; aria-hidden=&quot;true&quot;&gt;&lt;span class=&quot;strut&quot; style=&quot;height:2.05002em;&quot;&gt;&lt;/span&gt;&lt;span class=&quot;strut bottom&quot; style=&quot;height:3.60004em;vertical-align:-1.55002em;&quot;&gt;&lt;/span&gt;&lt;span class=&quot;base displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;minner displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;style-wrap reset-textstyle textstyle uncramped&quot;&gt;&lt;span class=&quot;delimsizing mult&quot;&gt;&lt;span class=&quot;vlist&quot;&gt;&lt;span style=&quot;top:0.9049999999999999em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;delimsizinginner delim-size4&quot;&gt;&lt;span&gt;⎣&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;top:-0.89502em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;delimsizinginner delim-size4&quot;&gt;&lt;span&gt;⎡&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;baseline-fix&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord&quot;&gt;&lt;span class=&quot;mtable&quot;&gt;&lt;span class=&quot;col-align-c&quot;&gt;&lt;span class=&quot;vlist&quot;&gt;&lt;span style=&quot;top:-1.2099999999999997em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;mord mathrm&quot;&gt;1&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;top:-0.00999999999999951em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;mord mathrm&quot;&gt;0&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;top:1.1900000000000006em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;mord mathrm&quot;&gt;0&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;baseline-fix&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;arraycolsep&quot; style=&quot;width:0.5em;&quot;&gt;&lt;/span&gt;&lt;span class=&quot;arraycolsep&quot; style=&quot;width:0.5em;&quot;&gt;&lt;/span&gt;&lt;span class=&quot;col-align-c&quot;&gt;&lt;span class=&quot;vlist&quot;&gt;&lt;span style=&quot;top:-1.2099999999999997em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;mord&quot;&gt;−&lt;/span&gt;&lt;span class=&quot;mop&quot;&gt;sin&lt;/span&gt;&lt;span class=&quot;mord mathit&quot; style=&quot;margin-right:0.02778em;&quot;&gt;θ&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;top:-0.00999999999999951em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;mop&quot;&gt;cos&lt;/span&gt;&lt;span class=&quot;mord mathit&quot; style=&quot;margin-right:0.02778em;&quot;&gt;θ&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;top:1.1900000000000006em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;mord mathrm&quot;&gt;0&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;baseline-fix&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;arraycolsep&quot; style=&quot;width:0.5em;&quot;&gt;&lt;/span&gt;&lt;span class=&quot;arraycolsep&quot; style=&quot;width:0.5em;&quot;&gt;&lt;/span&gt;&lt;span class=&quot;col-align-c&quot;&gt;&lt;span class=&quot;vlist&quot;&gt;&lt;span style=&quot;top:-1.2099999999999997em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;mord mathrm&quot;&gt;0&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;top:-0.00999999999999951em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;mord mathrm&quot;&gt;0&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;top:1.1900000000000006em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;mord mathrm&quot;&gt;1&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;baseline-fix&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;style-wrap reset-textstyle textstyle uncramped&quot;&gt;&lt;span class=&quot;delimsizing mult&quot;&gt;&lt;span class=&quot;vlist&quot;&gt;&lt;span style=&quot;top:0.9049999999999999em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;delimsizinginner delim-size4&quot;&gt;&lt;span&gt;⎦&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;top:-0.89502em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;delimsizinginner delim-size4&quot;&gt;&lt;span&gt;⎤&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;baseline-fix&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;因为六边形的圆心角是60°，所以此时的θ是30°。代入得到&lt;code&gt;matrix(&lt;span class=&quot;katex&quot;&gt;&lt;span class=&quot;katex-mathml&quot;&gt;&lt;math&gt;&lt;semantics&gt;&lt;mrow&gt;&lt;mn&gt;1&lt;/mn&gt;&lt;mo separator=&quot;true&quot;&gt;,&lt;/mo&gt;&lt;mn&gt;0&lt;/mn&gt;&lt;mo separator=&quot;true&quot;&gt;,&lt;/mo&gt;&lt;mo&gt;−&lt;/mo&gt;&lt;mn&gt;0&lt;/mn&gt;&lt;mi mathvariant=&quot;normal&quot;&gt;.&lt;/mi&gt;&lt;mn&gt;5&lt;/mn&gt;&lt;mo separator=&quot;true&quot;&gt;,&lt;/mo&gt;&lt;mfrac&gt;&lt;mrow&gt;&lt;msqrt&gt;&lt;mrow&gt;&lt;mn&gt;3&lt;/mn&gt;&lt;/mrow&gt;&lt;/msqrt&gt;&lt;/mrow&gt;&lt;mrow&gt;&lt;mn&gt;2&lt;/mn&gt;&lt;/mrow&gt;&lt;/mfrac&gt;&lt;mo separator=&quot;true&quot;&gt;,&lt;/mo&gt;&lt;mn&gt;0&lt;/mn&gt;&lt;mo separator=&quot;true&quot;&gt;,&lt;/mo&gt;&lt;mn&gt;0&lt;/mn&gt;&lt;/mrow&gt;&lt;annotation encoding=&quot;application/x-tex&quot;&gt;1, 0, -0.5, \frac{\sqrt{3}}{2}, 0, 0&lt;/annotation&gt;&lt;/semantics&gt;&lt;/math&gt;&lt;/span&gt;&lt;span class=&quot;katex-html&quot; aria-hidden=&quot;true&quot;&gt;&lt;span class=&quot;strut&quot; style=&quot;height:1.054554em;&quot;&gt;&lt;/span&gt;&lt;span class=&quot;strut bottom&quot; style=&quot;height:1.399554em;vertical-align:-0.345em;&quot;&gt;&lt;/span&gt;&lt;span class=&quot;base textstyle uncramped&quot;&gt;&lt;span class=&quot;mord mathrm&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;mpunct&quot;&gt;,&lt;/span&gt;&lt;span class=&quot;mord mathrm&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;mpunct&quot;&gt;,&lt;/span&gt;&lt;span class=&quot;mord&quot;&gt;−&lt;/span&gt;&lt;span class=&quot;mord mathrm&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;mord mathrm&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;mord mathrm&quot;&gt;5&lt;/span&gt;&lt;span class=&quot;mpunct&quot;&gt;,&lt;/span&gt;&lt;span class=&quot;mord reset-textstyle textstyle uncramped&quot;&gt;&lt;span class=&quot;sizing reset-size5 size5 reset-textstyle textstyle uncramped nulldelimiter&quot;&gt;&lt;/span&gt;&lt;span class=&quot;mfrac&quot;&gt;&lt;span class=&quot;vlist&quot;&gt;&lt;span style=&quot;top:0.345em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:1em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;reset-textstyle scriptstyle cramped&quot;&gt;&lt;span class=&quot;mord scriptstyle cramped&quot;&gt;&lt;span class=&quot;mord mathrm&quot;&gt;2&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;top:-0.22999999999999998em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:1em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;reset-textstyle textstyle uncramped frac-line&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;top:-0.394em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:1em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;reset-textstyle scriptstyle uncramped&quot;&gt;&lt;span class=&quot;mord scriptstyle uncramped&quot;&gt;&lt;span class=&quot;sqrt mord&quot;&gt;&lt;span class=&quot;sqrt-sign&quot; style=&quot;top:-0.08650571428571419em;&quot;&gt;&lt;span class=&quot;style-wrap reset-scriptstyle scriptstyle uncramped&quot;&gt;√&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;vlist&quot;&gt;&lt;span style=&quot;top:0em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:1.4285714285714286em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord scriptstyle cramped&quot;&gt;&lt;span class=&quot;mord mathrm&quot;&gt;3&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;top:-0.8293628571428571em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:1.4285714285714286em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;reset-scriptstyle textstyle uncramped sqrt-line&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;baseline-fix&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:1.4285714285714286em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;baseline-fix&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:1em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;sizing reset-size5 size5 reset-textstyle textstyle uncramped nulldelimiter&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mpunct&quot;&gt;,&lt;/span&gt;&lt;span class=&quot;mord mathrm&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;mpunct&quot;&gt;,&lt;/span&gt;&lt;span class=&quot;mord mathrm&quot;&gt;0&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;)&lt;/code&gt;&lt;/p&gt;
&lt;h2 id=&quot;旋转代入&quot;&gt;&lt;a href=&quot;#旋转代入&quot; class=&quot;headerlink&quot; title=&quot;旋转代入&quot;&gt;&lt;/a&gt;旋转代入&lt;/h2&gt;&lt;p&gt;CSS &lt;code&gt;transform&lt;/code&gt;有一个&lt;code&gt;transform-origin&lt;/code&gt;属性，可以规定元素变换的&lt;strong&gt;原点&lt;/strong&gt;。对于前面所示的情况，显然是以我们的已知角——左下角为原点代入最合适。CSS旋转本身可以用&lt;code&gt;rotate()&lt;/code&gt;，但是我直接测试的结果是它总转不到该转的地方，一不做二不休，干脆直接乘进去算了…&lt;/p&gt;
&lt;p&gt;旋转的矩阵是这样的，角度为逆时针：&lt;br&gt;&lt;span class=&quot;katex-display&quot;&gt;&lt;span class=&quot;katex&quot;&gt;&lt;span class=&quot;katex-mathml&quot;&gt;&lt;math&gt;&lt;semantics&gt;&lt;mrow&gt;&lt;mrow&gt;&lt;mo fence=&quot;true&quot;&gt;[&lt;/mo&gt;&lt;mtable&gt;&lt;mtr&gt;&lt;mtd&gt;&lt;mrow&gt;&lt;mi&gt;cos&lt;/mi&gt;&lt;mi&gt;θ&lt;/mi&gt;&lt;/mrow&gt;&lt;/mtd&gt;&lt;mtd&gt;&lt;mrow&gt;&lt;mo&gt;−&lt;/mo&gt;&lt;mi&gt;sin&lt;/mi&gt;&lt;mi&gt;θ&lt;/mi&gt;&lt;/mrow&gt;&lt;/mtd&gt;&lt;/mtr&gt;&lt;mtr&gt;&lt;mtd&gt;&lt;mrow&gt;&lt;mi&gt;sin&lt;/mi&gt;&lt;mi&gt;θ&lt;/mi&gt;&lt;/mrow&gt;&lt;/mtd&gt;&lt;mtd&gt;&lt;mrow&gt;&lt;mi&gt;cos&lt;/mi&gt;&lt;mi&gt;θ&lt;/mi&gt;&lt;/mrow&gt;&lt;/mtd&gt;&lt;/mtr&gt;&lt;/mtable&gt;&lt;mo fence=&quot;true&quot;&gt;]&lt;/mo&gt;&lt;/mrow&gt;&lt;mo&gt;⋅&lt;/mo&gt;&lt;mrow&gt;&lt;mo fence=&quot;true&quot;&gt;[&lt;/mo&gt;&lt;mtable&gt;&lt;mtr&gt;&lt;mtd&gt;&lt;mrow&gt;&lt;mi&gt;x&lt;/mi&gt;&lt;/mrow&gt;&lt;/mtd&gt;&lt;/mtr&gt;&lt;mtr&gt;&lt;mtd&gt;&lt;mrow&gt;&lt;mi&gt;y&lt;/mi&gt;&lt;/mrow&gt;&lt;/mtd&gt;&lt;/mtr&gt;&lt;/mtable&gt;&lt;mo fence=&quot;true&quot;&gt;]&lt;/mo&gt;&lt;/mrow&gt;&lt;mo&gt;=&lt;/mo&gt;&lt;mrow&gt;&lt;mo fence=&quot;true&quot;&gt;[&lt;/mo&gt;&lt;mtable&gt;&lt;mtr&gt;&lt;mtd&gt;&lt;mrow&gt;&lt;mi&gt;cos&lt;/mi&gt;&lt;mi&gt;θ&lt;/mi&gt;&lt;mo&gt;⋅&lt;/mo&gt;&lt;mi&gt;x&lt;/mi&gt;&lt;mo&gt;−&lt;/mo&gt;&lt;mi&gt;sin&lt;/mi&gt;&lt;mi&gt;θ&lt;/mi&gt;&lt;mo&gt;⋅&lt;/mo&gt;&lt;mi&gt;y&lt;/mi&gt;&lt;/mrow&gt;&lt;/mtd&gt;&lt;/mtr&gt;&lt;mtr&gt;&lt;mtd&gt;&lt;mrow&gt;&lt;mi&gt;sin&lt;/mi&gt;&lt;mi&gt;θ&lt;/mi&gt;&lt;mo&gt;⋅&lt;/mo&gt;&lt;mi&gt;x&lt;/mi&gt;&lt;mo&gt;+&lt;/mo&gt;&lt;mi&gt;cos&lt;/mi&gt;&lt;mi&gt;θ&lt;/mi&gt;&lt;mo&gt;⋅&lt;/mo&gt;&lt;mi&gt;y&lt;/mi&gt;&lt;/mrow&gt;&lt;/mtd&gt;&lt;/mtr&gt;&lt;/mtable&gt;&lt;mo fence=&quot;true&quot;&gt;]&lt;/mo&gt;&lt;/mrow&gt;&lt;/mrow&gt;&lt;annotation encoding=&quot;application/x-tex&quot;&gt;\begin{bmatrix}
  \cos\theta &amp;amp; -\sin\theta \\
  \sin\theta &amp;amp; \cos\theta 
\end{bmatrix}
\cdot
\begin{bmatrix}
  x \\
  y 
\end{bmatrix}
=
\begin{bmatrix}
  \cos\theta\cdot x - \sin\theta\cdot y \\
  \sin\theta\cdot x + \cos\theta\cdot y 
\end{bmatrix}&lt;/annotation&gt;&lt;/semantics&gt;&lt;/math&gt;&lt;/span&gt;&lt;span class=&quot;katex-html&quot; aria-hidden=&quot;true&quot;&gt;&lt;span class=&quot;strut&quot; style=&quot;height:1.45em;&quot;&gt;&lt;/span&gt;&lt;span class=&quot;strut bottom&quot; style=&quot;height:2.40003em;vertical-align:-0.95003em;&quot;&gt;&lt;/span&gt;&lt;span class=&quot;base displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;minner displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;style-wrap reset-textstyle textstyle uncramped&quot; style=&quot;top:0em;&quot;&gt;&lt;span class=&quot;delimsizing size3&quot;&gt;[&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord&quot;&gt;&lt;span class=&quot;mtable&quot;&gt;&lt;span class=&quot;col-align-c&quot;&gt;&lt;span class=&quot;vlist&quot;&gt;&lt;span style=&quot;top:-0.6099999999999999em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;mop&quot;&gt;cos&lt;/span&gt;&lt;span class=&quot;mord mathit&quot; style=&quot;margin-right:0.02778em;&quot;&gt;θ&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;top:0.5900000000000003em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;mop&quot;&gt;sin&lt;/span&gt;&lt;span class=&quot;mord mathit&quot; style=&quot;margin-right:0.02778em;&quot;&gt;θ&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;baseline-fix&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;arraycolsep&quot; style=&quot;width:0.5em;&quot;&gt;&lt;/span&gt;&lt;span class=&quot;arraycolsep&quot; style=&quot;width:0.5em;&quot;&gt;&lt;/span&gt;&lt;span class=&quot;col-align-c&quot;&gt;&lt;span class=&quot;vlist&quot;&gt;&lt;span style=&quot;top:-0.6099999999999999em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;mord&quot;&gt;−&lt;/span&gt;&lt;span class=&quot;mop&quot;&gt;sin&lt;/span&gt;&lt;span class=&quot;mord mathit&quot; style=&quot;margin-right:0.02778em;&quot;&gt;θ&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;top:0.5900000000000003em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;mop&quot;&gt;cos&lt;/span&gt;&lt;span class=&quot;mord mathit&quot; style=&quot;margin-right:0.02778em;&quot;&gt;θ&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;baseline-fix&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;style-wrap reset-textstyle textstyle uncramped&quot; style=&quot;top:0em;&quot;&gt;&lt;span class=&quot;delimsizing size3&quot;&gt;]&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mbin&quot;&gt;⋅&lt;/span&gt;&lt;span class=&quot;minner displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;style-wrap reset-textstyle textstyle uncramped&quot; style=&quot;top:0em;&quot;&gt;&lt;span class=&quot;delimsizing size3&quot;&gt;[&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord&quot;&gt;&lt;span class=&quot;mtable&quot;&gt;&lt;span class=&quot;col-align-c&quot;&gt;&lt;span class=&quot;vlist&quot;&gt;&lt;span style=&quot;top:-0.6099999999999999em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;mord mathit&quot;&gt;x&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;top:0.5900000000000003em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;mord mathit&quot; style=&quot;margin-right:0.03588em;&quot;&gt;y&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;baseline-fix&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;style-wrap reset-textstyle textstyle uncramped&quot; style=&quot;top:0em;&quot;&gt;&lt;span class=&quot;delimsizing size3&quot;&gt;]&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mrel&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;minner displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;style-wrap reset-textstyle textstyle uncramped&quot; style=&quot;top:0em;&quot;&gt;&lt;span class=&quot;delimsizing size3&quot;&gt;[&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord&quot;&gt;&lt;span class=&quot;mtable&quot;&gt;&lt;span class=&quot;col-align-c&quot;&gt;&lt;span class=&quot;vlist&quot;&gt;&lt;span style=&quot;top:-0.6099999999999999em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;mop&quot;&gt;cos&lt;/span&gt;&lt;span class=&quot;mord mathit&quot; style=&quot;margin-right:0.02778em;&quot;&gt;θ&lt;/span&gt;&lt;span class=&quot;mbin&quot;&gt;⋅&lt;/span&gt;&lt;span class=&quot;mord mathit&quot;&gt;x&lt;/span&gt;&lt;span class=&quot;mbin&quot;&gt;−&lt;/span&gt;&lt;span class=&quot;mop&quot;&gt;sin&lt;/span&gt;&lt;span class=&quot;mord mathit&quot; style=&quot;margin-right:0.02778em;&quot;&gt;θ&lt;/span&gt;&lt;span class=&quot;mbin&quot;&gt;⋅&lt;/span&gt;&lt;span class=&quot;mord mathit&quot; style=&quot;margin-right:0.03588em;&quot;&gt;y&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;top:0.5900000000000003em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;mop&quot;&gt;sin&lt;/span&gt;&lt;span class=&quot;mord mathit&quot; style=&quot;margin-right:0.02778em;&quot;&gt;θ&lt;/span&gt;&lt;span class=&quot;mbin&quot;&gt;⋅&lt;/span&gt;&lt;span class=&quot;mord mathit&quot;&gt;x&lt;/span&gt;&lt;span class=&quot;mbin&quot;&gt;+&lt;/span&gt;&lt;span class=&quot;mop&quot;&gt;cos&lt;/span&gt;&lt;span class=&quot;mord mathit&quot; style=&quot;margin-right:0.02778em;&quot;&gt;θ&lt;/span&gt;&lt;span class=&quot;mbin&quot;&gt;⋅&lt;/span&gt;&lt;span class=&quot;mord mathit&quot; style=&quot;margin-right:0.03588em;&quot;&gt;y&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;baseline-fix&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;style-wrap reset-textstyle textstyle uncramped&quot; style=&quot;top:0em;&quot;&gt;&lt;span class=&quot;delimsizing size3&quot;&gt;]&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;因此对应六围图右上角那个三角的位置，旋转角度应该是30°，接下来的5个三角形再依次旋转60°就可以了。最终算出来的参数是&lt;/p&gt;
&lt;span class=&quot;katex-display&quot;&gt;&lt;span class=&quot;katex&quot;&gt;&lt;span class=&quot;katex-mathml&quot;&gt;&lt;math&gt;&lt;semantics&gt;&lt;mrow&gt;&lt;mrow&gt;&lt;mo fence=&quot;true&quot;&gt;{&lt;/mo&gt;&lt;mtable&gt;&lt;mtr&gt;&lt;mtd&gt;&lt;mrow&gt;&lt;msup&gt;&lt;mi&gt;x&lt;/mi&gt;&lt;mrow&gt;&lt;msup&gt;&lt;mrow&gt;&lt;/mrow&gt;&lt;mrow&gt;&lt;mi mathvariant=&quot;normal&quot;&gt;′&lt;/mi&gt;&lt;/mrow&gt;&lt;/msup&gt;&lt;/mrow&gt;&lt;/msup&gt;&lt;/mrow&gt;&lt;/mtd&gt;&lt;mtd&gt;&lt;mrow&gt;&lt;mrow&gt;&lt;/mrow&gt;&lt;mo&gt;=&lt;/mo&gt;&lt;/mrow&gt;&lt;/mtd&gt;&lt;mtd&gt;&lt;mrow&gt;&lt;mi&gt;cos&lt;/mi&gt;&lt;mi&gt;θ&lt;/mi&gt;&lt;mo&gt;⋅&lt;/mo&gt;&lt;mi&gt;x&lt;/mi&gt;&lt;mo&gt;−&lt;/mo&gt;&lt;mfrac&gt;&lt;mrow&gt;&lt;mi&gt;cos&lt;/mi&gt;&lt;mi&gt;θ&lt;/mi&gt;&lt;mo&gt;+&lt;/mo&gt;&lt;msqrt&gt;&lt;mrow&gt;&lt;mn&gt;3&lt;/mn&gt;&lt;/mrow&gt;&lt;/msqrt&gt;&lt;mi&gt;sin&lt;/mi&gt;&lt;mi&gt;θ&lt;/mi&gt;&lt;/mrow&gt;&lt;mrow&gt;&lt;mn&gt;2&lt;/mn&gt;&lt;/mrow&gt;&lt;/mfrac&gt;&lt;mo&gt;⋅&lt;/mo&gt;&lt;mi&gt;y&lt;/mi&gt;&lt;/mrow&gt;&lt;/mtd&gt;&lt;/mtr&gt;&lt;mtr&gt;&lt;mtd&gt;&lt;mrow&gt;&lt;msup&gt;&lt;mi&gt;y&lt;/mi&gt;&lt;mrow&gt;&lt;msup&gt;&lt;mrow&gt;&lt;/mrow&gt;&lt;mrow&gt;&lt;mi mathvariant=&quot;normal&quot;&gt;′&lt;/mi&gt;&lt;/mrow&gt;&lt;/msup&gt;&lt;/mrow&gt;&lt;/msup&gt;&lt;/mrow&gt;&lt;/mtd&gt;&lt;mtd&gt;&lt;mrow&gt;&lt;mrow&gt;&lt;/mrow&gt;&lt;mo&gt;=&lt;/mo&gt;&lt;/mrow&gt;&lt;/mtd&gt;&lt;mtd&gt;&lt;mrow&gt;&lt;mi&gt;sin&lt;/mi&gt;&lt;mi&gt;θ&lt;/mi&gt;&lt;mo&gt;⋅&lt;/mo&gt;&lt;mi&gt;x&lt;/mi&gt;&lt;mo&gt;+&lt;/mo&gt;&lt;mfrac&gt;&lt;mrow&gt;&lt;msqrt&gt;&lt;mrow&gt;&lt;mn&gt;3&lt;/mn&gt;&lt;/mrow&gt;&lt;/msqrt&gt;&lt;mi&gt;cos&lt;/mi&gt;&lt;mi&gt;θ&lt;/mi&gt;&lt;mo&gt;−&lt;/mo&gt;&lt;mi&gt;sin&lt;/mi&gt;&lt;mi&gt;θ&lt;/mi&gt;&lt;/mrow&gt;&lt;mrow&gt;&lt;mn&gt;2&lt;/mn&gt;&lt;/mrow&gt;&lt;/mfrac&gt;&lt;mo&gt;⋅&lt;/mo&gt;&lt;mi&gt;y&lt;/mi&gt;&lt;/mrow&gt;&lt;/mtd&gt;&lt;/mtr&gt;&lt;/mtable&gt;&lt;/mrow&gt;&lt;/mrow&gt;&lt;annotation encoding=&quot;application/x-tex&quot;&gt;\left\{
\begin{aligned}
x^{&amp;#x27;} &amp;amp; = &amp;amp; \cos\theta\cdot x - \frac{\cos\theta + \sqrt{3}\sin\theta}{2} \cdot y \\
y^{&amp;#x27;} &amp;amp; = &amp;amp; \sin\theta\cdot x + \frac{\sqrt{3}\cos\theta - \sin\theta}{2}\cdot y 
\end{aligned}
\right.&lt;/annotation&gt;&lt;/semantics&gt;&lt;/math&gt;&lt;/span&gt;&lt;span class=&quot;katex-html&quot; aria-hidden=&quot;true&quot;&gt;&lt;span class=&quot;strut&quot; style=&quot;height:2.52022em;&quot;&gt;&lt;/span&gt;&lt;span class=&quot;strut bottom&quot; style=&quot;height:4.54044em;vertical-align:-2.02022em;&quot;&gt;&lt;/span&gt;&lt;span class=&quot;base displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;minner displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;style-wrap reset-textstyle textstyle uncramped&quot;&gt;&lt;span class=&quot;delimsizing mult&quot;&gt;&lt;span class=&quot;vlist&quot;&gt;&lt;span style=&quot;top:0.9500099999999998em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;delimsizinginner delim-size4&quot;&gt;&lt;span&gt;⎩&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;top:0.9500099999999998em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;delimsizinginner delim-size4&quot;&gt;&lt;span&gt;⎪&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;top:-0.000010000000000287557em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;delimsizinginner delim-size4&quot;&gt;&lt;span&gt;⎨&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;top:-1.1500100000000002em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;delimsizinginner delim-size4&quot;&gt;&lt;span&gt;⎪&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;top:-1.4500200000000003em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;delimsizinginner delim-size4&quot;&gt;&lt;span&gt;⎧&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;baseline-fix&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord&quot;&gt;&lt;span class=&quot;mtable&quot;&gt;&lt;span class=&quot;col-align-r&quot;&gt;&lt;span class=&quot;vlist&quot;&gt;&lt;span style=&quot;top:-0.9359999999999999em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;mord&quot;&gt;&lt;span class=&quot;mord mathit&quot;&gt;x&lt;/span&gt;&lt;span class=&quot;vlist&quot;&gt;&lt;span style=&quot;top:-0.413em;margin-right:0.05em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;reset-textstyle scriptstyle uncramped&quot;&gt;&lt;span class=&quot;mord scriptstyle uncramped&quot;&gt;&lt;span class=&quot;mord&quot;&gt;&lt;span&gt;&lt;/span&gt;&lt;span class=&quot;vlist&quot;&gt;&lt;span style=&quot;top:-0.363em;margin-right:0.07142857142857144em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;reset-scriptstyle scriptscriptstyle uncramped&quot;&gt;&lt;span class=&quot;mord scriptscriptstyle uncramped&quot;&gt;&lt;span class=&quot;mord mathrm&quot;&gt;′&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;baseline-fix&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;baseline-fix&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;top:1.3342200000000002em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;mord&quot;&gt;&lt;span class=&quot;mord mathit&quot; style=&quot;margin-right:0.03588em;&quot;&gt;y&lt;/span&gt;&lt;span class=&quot;vlist&quot;&gt;&lt;span style=&quot;top:-0.413em;margin-right:0.05em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;reset-textstyle scriptstyle uncramped&quot;&gt;&lt;span class=&quot;mord scriptstyle uncramped&quot;&gt;&lt;span class=&quot;mord&quot;&gt;&lt;span&gt;&lt;/span&gt;&lt;span class=&quot;vlist&quot;&gt;&lt;span style=&quot;top:-0.363em;margin-right:0.07142857142857144em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;reset-scriptstyle scriptscriptstyle uncramped&quot;&gt;&lt;span class=&quot;mord scriptscriptstyle uncramped&quot;&gt;&lt;span class=&quot;mord mathrm&quot;&gt;′&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;baseline-fix&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;baseline-fix&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;baseline-fix&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;col-align-l&quot;&gt;&lt;span class=&quot;vlist&quot;&gt;&lt;span style=&quot;top:-0.9359999999999999em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;mord displaystyle textstyle uncramped&quot;&gt;&lt;/span&gt;&lt;span class=&quot;mrel&quot;&gt;=&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;top:1.3342200000000002em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;mord displaystyle textstyle uncramped&quot;&gt;&lt;/span&gt;&lt;span class=&quot;mrel&quot;&gt;=&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;baseline-fix&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;arraycolsep&quot; style=&quot;width:2em;&quot;&gt;&lt;/span&gt;&lt;span class=&quot;col-align-r&quot;&gt;&lt;span class=&quot;vlist&quot;&gt;&lt;span style=&quot;top:-0.9359999999999999em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:1em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;mop&quot;&gt;cos&lt;/span&gt;&lt;span class=&quot;mord mathit&quot; style=&quot;margin-right:0.02778em;&quot;&gt;θ&lt;/span&gt;&lt;span class=&quot;mbin&quot;&gt;⋅&lt;/span&gt;&lt;span class=&quot;mord mathit&quot;&gt;x&lt;/span&gt;&lt;span class=&quot;mbin&quot;&gt;−&lt;/span&gt;&lt;span class=&quot;mord reset-textstyle displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;sizing reset-size5 size5 reset-textstyle textstyle uncramped nulldelimiter&quot;&gt;&lt;/span&gt;&lt;span class=&quot;mfrac&quot;&gt;&lt;span class=&quot;vlist&quot;&gt;&lt;span style=&quot;top:0.686em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:1em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;reset-textstyle textstyle cramped&quot;&gt;&lt;span class=&quot;mord textstyle cramped&quot;&gt;&lt;span class=&quot;mord mathrm&quot;&gt;2&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;top:-0.22999999999999998em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:1em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;reset-textstyle textstyle uncramped frac-line&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;top:-0.677em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:1em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;reset-textstyle textstyle uncramped&quot;&gt;&lt;span class=&quot;mord textstyle uncramped&quot;&gt;&lt;span class=&quot;mop&quot;&gt;cos&lt;/span&gt;&lt;span class=&quot;mord mathit&quot; style=&quot;margin-right:0.02778em;&quot;&gt;θ&lt;/span&gt;&lt;span class=&quot;mbin&quot;&gt;+&lt;/span&gt;&lt;span class=&quot;sqrt mord&quot;&gt;&lt;span class=&quot;sqrt-sign&quot; style=&quot;top:-0.06722000000000006em;&quot;&gt;&lt;span class=&quot;style-wrap reset-textstyle textstyle uncramped&quot;&gt;√&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;vlist&quot;&gt;&lt;span style=&quot;top:0em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:1em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord textstyle cramped&quot;&gt;&lt;span class=&quot;mord mathrm&quot;&gt;3&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;top:-0.8272200000000001em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:1em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;reset-textstyle textstyle uncramped sqrt-line&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;baseline-fix&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:1em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mop&quot;&gt;sin&lt;/span&gt;&lt;span class=&quot;mord mathit&quot; style=&quot;margin-right:0.02778em;&quot;&gt;θ&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;baseline-fix&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:1em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;sizing reset-size5 size5 reset-textstyle textstyle uncramped nulldelimiter&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mbin&quot;&gt;⋅&lt;/span&gt;&lt;span class=&quot;mord mathit&quot; style=&quot;margin-right:0.03588em;&quot;&gt;y&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;top:1.3342200000000002em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:1em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;mop&quot;&gt;sin&lt;/span&gt;&lt;span class=&quot;mord mathit&quot; style=&quot;margin-right:0.02778em;&quot;&gt;θ&lt;/span&gt;&lt;span class=&quot;mbin&quot;&gt;⋅&lt;/span&gt;&lt;span class=&quot;mord mathit&quot;&gt;x&lt;/span&gt;&lt;span class=&quot;mbin&quot;&gt;+&lt;/span&gt;&lt;span class=&quot;mord reset-textstyle displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;sizing reset-size5 size5 reset-textstyle textstyle uncramped nulldelimiter&quot;&gt;&lt;/span&gt;&lt;span class=&quot;mfrac&quot;&gt;&lt;span class=&quot;vlist&quot;&gt;&lt;span style=&quot;top:0.686em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:1em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;reset-textstyle textstyle cramped&quot;&gt;&lt;span class=&quot;mord textstyle cramped&quot;&gt;&lt;span class=&quot;mord mathrm&quot;&gt;2&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;top:-0.22999999999999998em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:1em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;reset-textstyle textstyle uncramped frac-line&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;top:-0.677em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:1em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;reset-textstyle textstyle uncramped&quot;&gt;&lt;span class=&quot;mord textstyle uncramped&quot;&gt;&lt;span class=&quot;sqrt mord&quot;&gt;&lt;span class=&quot;sqrt-sign&quot; style=&quot;top:-0.06722000000000006em;&quot;&gt;&lt;span class=&quot;style-wrap reset-textstyle textstyle uncramped&quot;&gt;√&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;vlist&quot;&gt;&lt;span style=&quot;top:0em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:1em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord textstyle cramped&quot;&gt;&lt;span class=&quot;mord mathrm&quot;&gt;3&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;top:-0.8272200000000001em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:1em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;reset-textstyle textstyle uncramped sqrt-line&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;baseline-fix&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:1em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mop&quot;&gt;cos&lt;/span&gt;&lt;span class=&quot;mord mathit&quot; style=&quot;margin-right:0.02778em;&quot;&gt;θ&lt;/span&gt;&lt;span class=&quot;mbin&quot;&gt;−&lt;/span&gt;&lt;span class=&quot;mop&quot;&gt;sin&lt;/span&gt;&lt;span class=&quot;mord mathit&quot; style=&quot;margin-right:0.02778em;&quot;&gt;θ&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;baseline-fix&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:1em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;sizing reset-size5 size5 reset-textstyle textstyle uncramped nulldelimiter&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mbin&quot;&gt;⋅&lt;/span&gt;&lt;span class=&quot;mord mathit&quot; style=&quot;margin-right:0.03588em;&quot;&gt;y&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;baseline-fix&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:1em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;sizing reset-size5 size5 reset-textstyle textstyle uncramped nulldelimiter&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;
&lt;p&gt;代入a~f得到&lt;code&gt;matrix(&lt;span class=&quot;katex&quot;&gt;&lt;span class=&quot;katex-mathml&quot;&gt;&lt;math&gt;&lt;semantics&gt;&lt;mrow&gt;&lt;mi&gt;cos&lt;/mi&gt;&lt;mi&gt;θ&lt;/mi&gt;&lt;mo separator=&quot;true&quot;&gt;,&lt;/mo&gt;&lt;mi&gt;sin&lt;/mi&gt;&lt;mi&gt;θ&lt;/mi&gt;&lt;mo separator=&quot;true&quot;&gt;,&lt;/mo&gt;&lt;mo&gt;−&lt;/mo&gt;&lt;mo&gt;(&lt;/mo&gt;&lt;mi&gt;cos&lt;/mi&gt;&lt;mi&gt;θ&lt;/mi&gt;&lt;mo&gt;+&lt;/mo&gt;&lt;msqrt&gt;&lt;mrow&gt;&lt;mn&gt;3&lt;/mn&gt;&lt;/mrow&gt;&lt;/msqrt&gt;&lt;mi&gt;sin&lt;/mi&gt;&lt;mi&gt;θ&lt;/mi&gt;&lt;mo&gt;)&lt;/mo&gt;&lt;mi mathvariant=&quot;normal&quot;&gt;/&lt;/mi&gt;&lt;mn&gt;2&lt;/mn&gt;&lt;mo separator=&quot;true&quot;&gt;,&lt;/mo&gt;&lt;mo&gt;(&lt;/mo&gt;&lt;msqrt&gt;&lt;mrow&gt;&lt;mn&gt;3&lt;/mn&gt;&lt;/mrow&gt;&lt;/msqrt&gt;&lt;mi&gt;cos&lt;/mi&gt;&lt;mi&gt;θ&lt;/mi&gt;&lt;mo&gt;−&lt;/mo&gt;&lt;mi&gt;sin&lt;/mi&gt;&lt;mi&gt;θ&lt;/mi&gt;&lt;mo&gt;)&lt;/mo&gt;&lt;mi mathvariant=&quot;normal&quot;&gt;/&lt;/mi&gt;&lt;mn&gt;2&lt;/mn&gt;&lt;mo separator=&quot;true&quot;&gt;,&lt;/mo&gt;&lt;mn&gt;0&lt;/mn&gt;&lt;mo separator=&quot;true&quot;&gt;,&lt;/mo&gt;&lt;mn&gt;0&lt;/mn&gt;&lt;mo&gt;)&lt;/mo&gt;&lt;/mrow&gt;&lt;annotation encoding=&quot;application/x-tex&quot;&gt;\cos\theta, \sin\theta, -(\cos\theta + \sqrt{3}\sin\theta)/2, (\sqrt{3}\cos\theta - \sin\theta)/2, 0 ,0)&lt;/annotation&gt;&lt;/semantics&gt;&lt;/math&gt;&lt;/span&gt;&lt;span class=&quot;katex-html&quot; aria-hidden=&quot;true&quot;&gt;&lt;span class=&quot;strut&quot; style=&quot;height:0.9072200000000001em;&quot;&gt;&lt;/span&gt;&lt;span class=&quot;strut bottom&quot; style=&quot;height:1.1572200000000001em;vertical-align:-0.25em;&quot;&gt;&lt;/span&gt;&lt;span class=&quot;base textstyle uncramped&quot;&gt;&lt;span class=&quot;mop&quot;&gt;cos&lt;/span&gt;&lt;span class=&quot;mord mathit&quot; style=&quot;margin-right:0.02778em;&quot;&gt;θ&lt;/span&gt;&lt;span class=&quot;mpunct&quot;&gt;,&lt;/span&gt;&lt;span class=&quot;mop&quot;&gt;sin&lt;/span&gt;&lt;span class=&quot;mord mathit&quot; style=&quot;margin-right:0.02778em;&quot;&gt;θ&lt;/span&gt;&lt;span class=&quot;mpunct&quot;&gt;,&lt;/span&gt;&lt;span class=&quot;mord&quot;&gt;−&lt;/span&gt;&lt;span class=&quot;mopen&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;mop&quot;&gt;cos&lt;/span&gt;&lt;span class=&quot;mord mathit&quot; style=&quot;margin-right:0.02778em;&quot;&gt;θ&lt;/span&gt;&lt;span class=&quot;mbin&quot;&gt;+&lt;/span&gt;&lt;span class=&quot;sqrt mord&quot;&gt;&lt;span class=&quot;sqrt-sign&quot; style=&quot;top:-0.06722000000000006em;&quot;&gt;&lt;span class=&quot;style-wrap reset-textstyle textstyle uncramped&quot;&gt;√&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;vlist&quot;&gt;&lt;span style=&quot;top:0em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:1em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord textstyle cramped&quot;&gt;&lt;span class=&quot;mord mathrm&quot;&gt;3&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;top:-0.8272200000000001em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:1em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;reset-textstyle textstyle uncramped sqrt-line&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;baseline-fix&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:1em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mop&quot;&gt;sin&lt;/span&gt;&lt;span class=&quot;mord mathit&quot; style=&quot;margin-right:0.02778em;&quot;&gt;θ&lt;/span&gt;&lt;span class=&quot;mclose&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;mord mathrm&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;mord mathrm&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;mpunct&quot;&gt;,&lt;/span&gt;&lt;span class=&quot;mopen&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;sqrt mord&quot;&gt;&lt;span class=&quot;sqrt-sign&quot; style=&quot;top:-0.06722000000000006em;&quot;&gt;&lt;span class=&quot;style-wrap reset-textstyle textstyle uncramped&quot;&gt;√&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;vlist&quot;&gt;&lt;span style=&quot;top:0em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:1em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord textstyle cramped&quot;&gt;&lt;span class=&quot;mord mathrm&quot;&gt;3&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;top:-0.8272200000000001em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:1em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;reset-textstyle textstyle uncramped sqrt-line&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;baseline-fix&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:1em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mop&quot;&gt;cos&lt;/span&gt;&lt;span class=&quot;mord mathit&quot; style=&quot;margin-right:0.02778em;&quot;&gt;θ&lt;/span&gt;&lt;span class=&quot;mbin&quot;&gt;−&lt;/span&gt;&lt;span class=&quot;mop&quot;&gt;sin&lt;/span&gt;&lt;span class=&quot;mord mathit&quot; style=&quot;margin-right:0.02778em;&quot;&gt;θ&lt;/span&gt;&lt;span class=&quot;mclose&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;mord mathrm&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;mord mathrm&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;mpunct&quot;&gt;,&lt;/span&gt;&lt;span class=&quot;mord mathrm&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;mpunct&quot;&gt;,&lt;/span&gt;&lt;span class=&quot;mord mathrm&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;mclose&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;（这里的θ对应最终的旋转角，即30deg、90deg、150deg…）&lt;/p&gt;
&lt;p&gt;源码可以上我的&lt;a href=&quot;http://codepen.io/hikarievo/pen/KaowyW/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;CodePen&lt;/a&gt;查看。&lt;/p&gt;
&lt;p&gt;另外背景的圆环思路来自牛逼的&lt;a href=&quot;http://a.singlediv.com/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;A Single Div&lt;/a&gt;。&lt;/p&gt;
&lt;h2 id=&quot;进一步思考&quot;&gt;&lt;a href=&quot;#进一步思考&quot; class=&quot;headerlink&quot; title=&quot;进一步思考&quot;&gt;&lt;/a&gt;进一步思考&lt;/h2&gt;&lt;p&gt;我发现这个玩意儿不叫六围图而是叫雷达图之后…我才认识到它不光是6个角的…还有可能是5个角、7个角的，按理说是都可以实现的…因为此时对应的圆心角应该是&lt;code&gt;360/n&lt;/code&gt;，之前算的只是n=6的情况而已。如果我一开始改变一下斜切的方向（如下图），最后就可以少算一步。&lt;/p&gt;
&lt;iframe src=&quot;https://www.desmos.com/calculator/k52ogqduq7?embed&quot; width=&quot;90%&quot; height=&quot;350px&quot; style=&quot;border: 1px solid #ccc&quot; frameborder=&quot;0&quot;&gt;&lt;/iframe&gt;

&lt;p&gt;差不多就这样，理论上CSS雷达图可以达到和canvas一样的效果，唯一的遗憾就是背景是个圆…虽然可以用&lt;code&gt;filter&lt;/code&gt;做出投影，但是想Single Div画出这些网格就相当困难了（如果想到了好办法再来update）。&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id=&quot;UPDATE&quot;&gt;&lt;a href=&quot;#UPDATE&quot; class=&quot;headerlink&quot; title=&quot;UPDATE&quot;&gt;&lt;/a&gt;UPDATE&lt;/h2&gt;&lt;p&gt;说好的UPDATE来了…这两天写完了之后茶不思饭不想，总觉得哪里不太对………今天趁着摸鱼又仔细重算了一遍…放假的时候果然不适合干活。&lt;/p&gt;
&lt;h3 id=&quot;原点和长度&quot;&gt;&lt;a href=&quot;#原点和长度&quot; class=&quot;headerlink&quot; title=&quot;原点和长度&quot;&gt;&lt;/a&gt;原点和长度&lt;/h3&gt;&lt;p&gt;之前我是以三角形的直角为原点建立的坐标系，这样可以简化运算…但是当原点变化的时候…伪斜切变换（姑且这么命名吧）的公式也会跟着变，以上文最后一张图（橙、黑）为例，假设坐标系原点为&lt;span class=&quot;katex&quot;&gt;&lt;span class=&quot;katex-mathml&quot;&gt;&lt;math&gt;&lt;semantics&gt;&lt;mrow&gt;&lt;mo&gt;(&lt;/mo&gt;&lt;mi&gt;a&lt;/mi&gt;&lt;mo separator=&quot;true&quot;&gt;,&lt;/mo&gt;&lt;mi&gt;b&lt;/mi&gt;&lt;mo&gt;)&lt;/mo&gt;&lt;/mrow&gt;&lt;annotation encoding=&quot;application/x-tex&quot;&gt;(a, b)&lt;/annotation&gt;&lt;/semantics&gt;&lt;/math&gt;&lt;/span&gt;&lt;span class=&quot;katex-html&quot; aria-hidden=&quot;true&quot;&gt;&lt;span class=&quot;strut&quot; style=&quot;height:0.75em;&quot;&gt;&lt;/span&gt;&lt;span class=&quot;strut bottom&quot; style=&quot;height:1em;vertical-align:-0.25em;&quot;&gt;&lt;/span&gt;&lt;span class=&quot;base textstyle uncramped&quot;&gt;&lt;span class=&quot;mopen&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;mord mathit&quot;&gt;a&lt;/span&gt;&lt;span class=&quot;mpunct&quot;&gt;,&lt;/span&gt;&lt;span class=&quot;mord mathit&quot;&gt;b&lt;/span&gt;&lt;span class=&quot;mclose&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;，那么这个伪斜切变换的矩阵应该是&lt;br&gt;&lt;span class=&quot;katex-display&quot;&gt;&lt;span class=&quot;katex&quot;&gt;&lt;span class=&quot;katex-mathml&quot;&gt;&lt;math&gt;&lt;semantics&gt;&lt;mrow&gt;&lt;mrow&gt;&lt;mo fence=&quot;true&quot;&gt;[&lt;/mo&gt;&lt;mtable&gt;&lt;mtr&gt;&lt;mtd&gt;&lt;mrow&gt;&lt;mi&gt;cos&lt;/mi&gt;&lt;mi&gt;θ&lt;/mi&gt;&lt;/mrow&gt;&lt;/mtd&gt;&lt;mtd&gt;&lt;mrow&gt;&lt;mn&gt;0&lt;/mn&gt;&lt;/mrow&gt;&lt;/mtd&gt;&lt;mtd&gt;&lt;mrow&gt;&lt;mo&gt;−&lt;/mo&gt;&lt;mi&gt;a&lt;/mi&gt;&lt;mo&gt;(&lt;/mo&gt;&lt;mi&gt;cos&lt;/mi&gt;&lt;mi&gt;θ&lt;/mi&gt;&lt;mo&gt;+&lt;/mo&gt;&lt;mn&gt;1&lt;/mn&gt;&lt;mo&gt;)&lt;/mo&gt;&lt;/mrow&gt;&lt;/mtd&gt;&lt;/mtr&gt;&lt;mtr&gt;&lt;mtd&gt;&lt;mrow&gt;&lt;mo&gt;−&lt;/mo&gt;&lt;mi&gt;sin&lt;/mi&gt;&lt;mi&gt;θ&lt;/mi&gt;&lt;/mrow&gt;&lt;/mtd&gt;&lt;mtd&gt;&lt;mrow&gt;&lt;mn&gt;1&lt;/mn&gt;&lt;/mrow&gt;&lt;/mtd&gt;&lt;mtd&gt;&lt;mrow&gt;&lt;mi&gt;sin&lt;/mi&gt;&lt;mi&gt;θ&lt;/mi&gt;&lt;mi&gt;a&lt;/mi&gt;&lt;/mrow&gt;&lt;/mtd&gt;&lt;/mtr&gt;&lt;mtr&gt;&lt;mtd&gt;&lt;mrow&gt;&lt;mn&gt;0&lt;/mn&gt;&lt;/mrow&gt;&lt;/mtd&gt;&lt;mtd&gt;&lt;mrow&gt;&lt;mn&gt;0&lt;/mn&gt;&lt;/mrow&gt;&lt;/mtd&gt;&lt;mtd&gt;&lt;mrow&gt;&lt;mn&gt;1&lt;/mn&gt;&lt;/mrow&gt;&lt;/mtd&gt;&lt;/mtr&gt;&lt;/mtable&gt;&lt;mo fence=&quot;true&quot;&gt;]&lt;/mo&gt;&lt;/mrow&gt;&lt;/mrow&gt;&lt;annotation encoding=&quot;application/x-tex&quot;&gt;\begin{bmatrix}
  \cos\theta &amp;amp; 0 &amp;amp; -a(\cos\theta+1) \\
  - \sin\theta &amp;amp; 1 &amp;amp; \sin\theta a \\
  0 &amp;amp; 0 &amp;amp; 1 
\end{bmatrix}&lt;/annotation&gt;&lt;/semantics&gt;&lt;/math&gt;&lt;/span&gt;&lt;span class=&quot;katex-html&quot; aria-hidden=&quot;true&quot;&gt;&lt;span class=&quot;strut&quot; style=&quot;height:2.05002em;&quot;&gt;&lt;/span&gt;&lt;span class=&quot;strut bottom&quot; style=&quot;height:3.60004em;vertical-align:-1.55002em;&quot;&gt;&lt;/span&gt;&lt;span class=&quot;base displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;minner displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;style-wrap reset-textstyle textstyle uncramped&quot;&gt;&lt;span class=&quot;delimsizing mult&quot;&gt;&lt;span class=&quot;vlist&quot;&gt;&lt;span style=&quot;top:0.9049999999999999em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;delimsizinginner delim-size4&quot;&gt;&lt;span&gt;⎣&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;top:-0.89502em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;delimsizinginner delim-size4&quot;&gt;&lt;span&gt;⎡&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;baseline-fix&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord&quot;&gt;&lt;span class=&quot;mtable&quot;&gt;&lt;span class=&quot;col-align-c&quot;&gt;&lt;span class=&quot;vlist&quot;&gt;&lt;span style=&quot;top:-1.2099999999999997em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;mop&quot;&gt;cos&lt;/span&gt;&lt;span class=&quot;mord mathit&quot; style=&quot;margin-right:0.02778em;&quot;&gt;θ&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;top:-0.00999999999999951em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;mord&quot;&gt;−&lt;/span&gt;&lt;span class=&quot;mop&quot;&gt;sin&lt;/span&gt;&lt;span class=&quot;mord mathit&quot; style=&quot;margin-right:0.02778em;&quot;&gt;θ&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;top:1.1900000000000006em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;mord mathrm&quot;&gt;0&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;baseline-fix&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;arraycolsep&quot; style=&quot;width:0.5em;&quot;&gt;&lt;/span&gt;&lt;span class=&quot;arraycolsep&quot; style=&quot;width:0.5em;&quot;&gt;&lt;/span&gt;&lt;span class=&quot;col-align-c&quot;&gt;&lt;span class=&quot;vlist&quot;&gt;&lt;span style=&quot;top:-1.2099999999999997em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;mord mathrm&quot;&gt;0&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;top:-0.00999999999999951em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;mord mathrm&quot;&gt;1&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;top:1.1900000000000006em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;mord mathrm&quot;&gt;0&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;baseline-fix&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;arraycolsep&quot; style=&quot;width:0.5em;&quot;&gt;&lt;/span&gt;&lt;span class=&quot;arraycolsep&quot; style=&quot;width:0.5em;&quot;&gt;&lt;/span&gt;&lt;span class=&quot;col-align-c&quot;&gt;&lt;span class=&quot;vlist&quot;&gt;&lt;span style=&quot;top:-1.2099999999999997em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;mord&quot;&gt;−&lt;/span&gt;&lt;span class=&quot;mord mathit&quot;&gt;a&lt;/span&gt;&lt;span class=&quot;mopen&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;mop&quot;&gt;cos&lt;/span&gt;&lt;span class=&quot;mord mathit&quot; style=&quot;margin-right:0.02778em;&quot;&gt;θ&lt;/span&gt;&lt;span class=&quot;mbin&quot;&gt;+&lt;/span&gt;&lt;span class=&quot;mord mathrm&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;mclose&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;top:-0.00999999999999951em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;mop&quot;&gt;sin&lt;/span&gt;&lt;span class=&quot;mord mathit&quot; style=&quot;margin-right:0.02778em;&quot;&gt;θ&lt;/span&gt;&lt;span class=&quot;mord mathit&quot;&gt;a&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;top:1.1900000000000006em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;mord displaystyle textstyle uncramped&quot;&gt;&lt;span class=&quot;mord mathrm&quot;&gt;1&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;baseline-fix&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;style-wrap reset-textstyle textstyle uncramped&quot;&gt;&lt;span class=&quot;delimsizing mult&quot;&gt;&lt;span class=&quot;vlist&quot;&gt;&lt;span style=&quot;top:0.9049999999999999em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;delimsizinginner delim-size4&quot;&gt;&lt;span&gt;⎦&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;top:-0.89502em;&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;delimsizinginner delim-size4&quot;&gt;&lt;span&gt;⎤&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;baseline-fix&quot;&gt;&lt;span class=&quot;fontsize-ensurer reset-size5 size5&quot;&gt;&lt;span style=&quot;font-size:0em;&quot;&gt;​&lt;/span&gt;&lt;/span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;…如果把这个斜切拆解来看，其实它是一个横坐标绕原点旋转，而纵坐标线性平移的两个不同的变换叠加而来的…这个新的矩阵只是重新移动了一下位置，旋转横坐标的部分实际上并没有变…&lt;/p&gt;
&lt;h3 id=&quot;transform的叠加及其顺序&quot;&gt;&lt;a href=&quot;#transform的叠加及其顺序&quot; class=&quot;headerlink&quot; title=&quot;transform的叠加及其顺序&quot;&gt;&lt;/a&gt;&lt;code&gt;transform&lt;/code&gt;的叠加及其顺序&lt;/h3&gt;&lt;p&gt;我前面提到，用伪斜切切完之后，应该直接用一个&lt;code&gt;rotate()&lt;/code&gt;就可以完成拼图了，但是不知道为什么总是转不对位。这里涉及到两个问题：一个是变换的顺序，另一个是矩阵的计算规则。&lt;/p&gt;
&lt;p&gt;我在前文中说&lt;code&gt;matrix()&lt;/code&gt;是大杀器，是因为它是CSS变换的&lt;strong&gt;本质&lt;/strong&gt;，所有的CSS变换都可以写成矩阵形式，而矩阵也是线性变换的标准数学表达方式，CSS提供的变换方法只不过是语法糖罢了。&lt;/p&gt;
&lt;p&gt;而&lt;code&gt;transform&lt;/code&gt;本身是支持多重变换的，比如&lt;br&gt;&lt;figure class=&quot;highlight html&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;gutter&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;1&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;tag&quot;&gt;&amp;lt;&lt;span class=&quot;name&quot;&gt;div&lt;/span&gt; &lt;span class=&quot;attr&quot;&gt;style&lt;/span&gt;=&lt;span class=&quot;string&quot;&gt;&quot;transform:translate(-10px,-20px) scale(2) rotate(45deg) translate(5px,10px)&quot;&lt;/span&gt;/&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;&lt;/p&gt;
&lt;p&gt;这段代码，直觉上感觉应该是先向左上方移动（&lt;code&gt;translate(-10px,-20px)&lt;/code&gt;），然后放大&lt;code&gt;scale(2)&lt;/code&gt;），然后旋转（&lt;code&gt;rotate(45deg)&lt;/code&gt;），最后再向右下方移动（&lt;code&gt;translate(5px,10px)&lt;/code&gt;），但是规范上说，它在功能上等于&lt;/p&gt;
&lt;figure class=&quot;highlight html&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;gutter&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;1&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;2&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;3&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;4&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;5&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;6&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;7&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;8&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;tag&quot;&gt;&amp;lt;&lt;span class=&quot;name&quot;&gt;div&lt;/span&gt; &lt;span class=&quot;attr&quot;&gt;style&lt;/span&gt;=&lt;span class=&quot;string&quot;&gt;&quot;transform:translate(-10px,-20px)&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &lt;span class=&quot;tag&quot;&gt;&amp;lt;&lt;span class=&quot;name&quot;&gt;div&lt;/span&gt; &lt;span class=&quot;attr&quot;&gt;style&lt;/span&gt;=&lt;span class=&quot;string&quot;&gt;&quot;transform:scale(2)&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    &lt;span class=&quot;tag&quot;&gt;&amp;lt;&lt;span class=&quot;name&quot;&gt;div&lt;/span&gt; &lt;span class=&quot;attr&quot;&gt;style&lt;/span&gt;=&lt;span class=&quot;string&quot;&gt;&quot;transform:rotate(45deg)&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;      &lt;span class=&quot;tag&quot;&gt;&amp;lt;&lt;span class=&quot;name&quot;&gt;div&lt;/span&gt; &lt;span class=&quot;attr&quot;&gt;style&lt;/span&gt;=&lt;span class=&quot;string&quot;&gt;&quot;transform:translate(5px,10px)&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;      &lt;span class=&quot;tag&quot;&gt;&amp;lt;/&lt;span class=&quot;name&quot;&gt;div&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    &lt;span class=&quot;tag&quot;&gt;&amp;lt;/&lt;span class=&quot;name&quot;&gt;div&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &lt;span class=&quot;tag&quot;&gt;&amp;lt;/&lt;span class=&quot;name&quot;&gt;div&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;tag&quot;&gt;&amp;lt;/&lt;span class=&quot;name&quot;&gt;div&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;p&gt;也就是说，如果在同一个元素上应用了一串变换，它的变换过程是反过来的：先向右下移动，然后旋转，然后放大，最后向左上移动。这又有什么不同呢…下面是一个例子&lt;/p&gt;
&lt;p&gt;&lt;/p&gt;&lt;p data-height=&quot;265&quot; data-theme-id=&quot;light&quot; data-slug-hash=&quot;oBdKdd&quot; data-default-tab=&quot;css,result&quot; data-user=&quot;hikarievo&quot; data-embed-version=&quot;2&quot; data-pen-title=&quot;Effection of transforms order&quot; class=&quot;codepen&quot;&gt;在&lt;a href=&quot;http://codepen.io&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;CodePen&lt;/a&gt;上查看&lt;a href=&quot;http://codepen.io/hikarievo/pen/oBdKdd/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;transform顺序对效果的影响&lt;/a&gt;(&lt;a href=&quot;http://codepen.io/hikarievo&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;@hikarievo&lt;/a&gt;)。&lt;/p&gt;&lt;p&gt;&lt;/p&gt;
&lt;script async src=&quot;https://production-assets.codepen.io/assets/embed/ei.js&quot;&gt;&lt;/script&gt;

&lt;p&gt;蓝色的是先放大再旋转，黄色的是先旋转再放大…会出现这样的区别，是因为每次变换操作之间，坐标轴是不会发生变化的。&lt;/p&gt;
&lt;p&gt;回到它的数学本质上来解释：多次线性变换，相当于是多个变换矩阵相乘，而矩阵的乘法是不满足交换律的（简单来说也就是所谓的&lt;span class=&quot;katex&quot;&gt;&lt;span class=&quot;katex-mathml&quot;&gt;&lt;math&gt;&lt;semantics&gt;&lt;mrow&gt;&lt;mi mathvariant=&quot;normal&quot;&gt;∣&lt;/mi&gt;&lt;mi&gt;a&lt;/mi&gt;&lt;mi mathvariant=&quot;normal&quot;&gt;∣&lt;/mi&gt;&lt;mo&gt;⋅&lt;/mo&gt;&lt;mi mathvariant=&quot;normal&quot;&gt;∣&lt;/mi&gt;&lt;mi&gt;b&lt;/mi&gt;&lt;mi mathvariant=&quot;normal&quot;&gt;∣&lt;/mi&gt;&lt;mo&gt;≠&lt;/mo&gt;&lt;mi mathvariant=&quot;normal&quot;&gt;∣&lt;/mi&gt;&lt;mi&gt;b&lt;/mi&gt;&lt;mi mathvariant=&quot;normal&quot;&gt;∣&lt;/mi&gt;&lt;mo&gt;⋅&lt;/mo&gt;&lt;mi mathvariant=&quot;normal&quot;&gt;∣&lt;/mi&gt;&lt;mi&gt;a&lt;/mi&gt;&lt;mi mathvariant=&quot;normal&quot;&gt;∣&lt;/mi&gt;&lt;/mrow&gt;&lt;annotation encoding=&quot;application/x-tex&quot;&gt;|a|\cdot |b| \neq |b| \cdot |a|&lt;/annotation&gt;&lt;/semantics&gt;&lt;/math&gt;&lt;/span&gt;&lt;span class=&quot;katex-html&quot; aria-hidden=&quot;true&quot;&gt;&lt;span class=&quot;strut&quot; style=&quot;height:0.75em;&quot;&gt;&lt;/span&gt;&lt;span class=&quot;strut bottom&quot; style=&quot;height:1em;vertical-align:-0.25em;&quot;&gt;&lt;/span&gt;&lt;span class=&quot;base textstyle uncramped&quot;&gt;&lt;span class=&quot;mord mathrm&quot;&gt;∣&lt;/span&gt;&lt;span class=&quot;mord mathit&quot;&gt;a&lt;/span&gt;&lt;span class=&quot;mord mathrm&quot;&gt;∣&lt;/span&gt;&lt;span class=&quot;mbin&quot;&gt;⋅&lt;/span&gt;&lt;span class=&quot;mord mathrm&quot;&gt;∣&lt;/span&gt;&lt;span class=&quot;mord mathit&quot;&gt;b&lt;/span&gt;&lt;span class=&quot;mord mathrm&quot;&gt;∣&lt;/span&gt;&lt;span class=&quot;mrel&quot;&gt;≠&lt;/span&gt;&lt;span class=&quot;mord mathrm&quot;&gt;∣&lt;/span&gt;&lt;span class=&quot;mord mathit&quot;&gt;b&lt;/span&gt;&lt;span class=&quot;mord mathrm&quot;&gt;∣&lt;/span&gt;&lt;span class=&quot;mbin&quot;&gt;⋅&lt;/span&gt;&lt;span class=&quot;mord mathrm&quot;&gt;∣&lt;/span&gt;&lt;span class=&quot;mord mathit&quot;&gt;a&lt;/span&gt;&lt;span class=&quot;mord mathrm&quot;&gt;∣&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;）。&lt;/p&gt;
&lt;p&gt;所以我之前想当然的先伪斜切，再旋转，于是写成了&lt;code&gt;transform: matrix() rotate();&lt;/code&gt;，按照文档规范的顺序，就变成了先旋转、再伪斜切…顺序反了，自然结果就不对了……&lt;/p&gt;
</content>
    
    <summary type="html">
    
      &lt;p&gt;最近做游戏资料经常要描述六围，现在比较流行的做法就是用六围图，但是资料库系统限制导致外挂JS库或者JS代码比较麻烦，何况秉承着能用CSS绝不用JS的思路，于是想着看能不能用CSS做六围图…&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;http://www.nintendo.com.hk/pressrelease/images/20170124_pokemon_bank_update/vc_poke_transfer_ss4.jpg&quot; alt=&quot;就不告诉你是什么游戏&quot;&gt;&lt;/p&gt;
&lt;p&gt;做出来差不多就是这样了：&lt;/p&gt;
&lt;p&gt;&lt;p data-height=&quot;265&quot; data-theme-id=&quot;light&quot; data-slug-hash=&quot;KaowyW&quot; data-default-tab=&quot;result&quot; data-user=&quot;hikarievo&quot; data-embed-version=&quot;2&quot; data-pen-title=&quot;Pure CSS hexagon radar chart&quot; class=&quot;codepen&quot;&gt;在&lt;a href=&quot;http://codepen.io&quot;&gt;CodePen&lt;/a&gt;上查看&lt;a href=&quot;http://codepen.io/hikarievo/pen/KaowyW/&quot;&gt;纯CSS六边形雷达图&lt;/a&gt;(&lt;a href=&quot;http://codepen.io/hikarievo&quot;&gt;@hikarievo&lt;/a&gt;)。&lt;/p&gt;&lt;/p&gt;
&lt;script async src=&quot;https://production-assets.codepen.io/assets/embed/ei.js&quot;&gt;&lt;/script&gt;

&lt;p&gt;顺带一提，这玩意儿的学名叫雷达图…我搜什么六边形图标啊六围图啊都搜不到快急死我了……&lt;br&gt;
    
    </summary>
    
    
      <category term="CSS" scheme="http://hikarievo.me/tags/CSS/"/>
    
      <category term="心得" scheme="http://hikarievo.me/tags/%E5%BF%83%E5%BE%97/"/>
    
  </entry>
  
  <entry>
    <title>使用CSS改变DOM元素顺序</title>
    <link href="http://hikarievo.me/2017/01/26/changing-display-order-by-css/"/>
    <id>http://hikarievo.me/2017/01/26/changing-display-order-by-css/</id>
    <published>2017-01-26T09:59:48.000Z</published>
    <updated>2017-01-26T11:56:08.101Z</updated>
    
    <content type="html">&lt;p&gt;时不时，偶尔，会有一些神奇的需求。在制作RWD页面的时候，偶尔会遇到元素重排序的问题。我之前遇到的情况，是PC版中，导航栏菜单横向排列，搜索框在最右侧；在移动版中，搜索栏跑到菜单的最上面，然后菜单纵向排列。非常典型的菜单处理策略。&lt;/p&gt;
&lt;p&gt; | 菜单1 | 菜单2 | ··· | 菜单n | 搜索栏 |&lt;/p&gt;
&lt;p&gt;变成&lt;/p&gt;
&lt;p&gt; | 搜索栏 |&lt;br&gt; | 菜单1 |&lt;br&gt; | 菜单2 |&lt;br&gt; …&lt;/p&gt;
&lt;p&gt;你准备怎么处理？&lt;br&gt;&lt;a id=&quot;more&quot;&gt;&lt;/a&gt;&lt;br&gt;一个有原则、有追求、有理想的&lt;del&gt;切图工&lt;/del&gt;前端工程师，是打从心底深处瞧不起使用JS移动DOM这种行为的，这样怎么能展现CSS的强大威力。虽然其实大都时候是因为懒…还有对性能问题担忧的迷思……总之信仰问题先放在一边，需求是，使用CSS重新排列DOM的显示顺序，方法比茴香豆的茴字的写法要多些。&lt;/p&gt;
&lt;h2 id=&quot;方法一：direction&quot;&gt;&lt;a href=&quot;#方法一：direction&quot; class=&quot;headerlink&quot; title=&quot;方法一：direction&quot;&gt;&lt;/a&gt;方法一：&lt;code&gt;direction&lt;/code&gt;&lt;/h2&gt;&lt;p&gt;对于&lt;strong&gt;一行内&lt;/strong&gt;的元素来说，&lt;code&gt;direction&lt;/code&gt;是首选，兼容好，效果佳，只不过并非它本意。&lt;code&gt;direction&lt;/code&gt;原本是用于为那些从右向左书写的语言（使用阿拉伯字母的语言）而准备的…可以让浏览器以不同的方向渲染&lt;strong&gt;行内元素&lt;/strong&gt;。对于我的这个需求来说，代码类似于这样：&lt;/p&gt;
&lt;figure class=&quot;highlight html&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;gutter&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;1&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;2&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;3&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;4&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;5&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;6&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;7&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;tag&quot;&gt;&amp;lt;&lt;span class=&quot;name&quot;&gt;div&lt;/span&gt; &lt;span class=&quot;attr&quot;&gt;class&lt;/span&gt;=&lt;span class=&quot;string&quot;&gt;&quot;container&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &lt;span class=&quot;tag&quot;&gt;&amp;lt;&lt;span class=&quot;name&quot;&gt;input&lt;/span&gt; &lt;span class=&quot;attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;string&quot;&gt;&quot;text&quot;&lt;/span&gt; &lt;span class=&quot;attr&quot;&gt;placeholder&lt;/span&gt;=&lt;span class=&quot;string&quot;&gt;&quot;搜索&quot;&lt;/span&gt; /&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &lt;span class=&quot;tag&quot;&gt;&amp;lt;&lt;span class=&quot;name&quot;&gt;ul&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    &lt;span class=&quot;tag&quot;&gt;&amp;lt;&lt;span class=&quot;name&quot;&gt;li&lt;/span&gt;&amp;gt;&lt;/span&gt;菜单1&lt;span class=&quot;tag&quot;&gt;&amp;lt;/&lt;span class=&quot;name&quot;&gt;li&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    &lt;span class=&quot;tag&quot;&gt;&amp;lt;&lt;span class=&quot;name&quot;&gt;li&lt;/span&gt;&amp;gt;&lt;/span&gt;菜单2&lt;span class=&quot;tag&quot;&gt;&amp;lt;/&lt;span class=&quot;name&quot;&gt;li&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &lt;span class=&quot;tag&quot;&gt;&amp;lt;/&lt;span class=&quot;name&quot;&gt;ul&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;tag&quot;&gt;&amp;lt;/&lt;span class=&quot;name&quot;&gt;div&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;figure class=&quot;highlight css&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;gutter&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;1&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;2&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;3&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;4&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;5&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;6&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;\* 以下对应的是&lt;span class=&quot;selector-tag&quot;&gt;PC&lt;/span&gt;版的&lt;span class=&quot;selector-tag&quot;&gt;CSS&lt;/span&gt; *\&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;selector-class&quot;&gt;.container&lt;/span&gt;&amp;#123; &lt;span class=&quot;attribute&quot;&gt;direction&lt;/span&gt;: rtl; &amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;selector-tag&quot;&gt;input&lt;/span&gt;, &lt;span class=&quot;selector-tag&quot;&gt;ul&lt;/span&gt;&amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &lt;span class=&quot;attribute&quot;&gt;display&lt;/span&gt;: inline-block;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &lt;span class=&quot;attribute&quot;&gt;direction&lt;/span&gt;: ltr;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;p&gt;这是个极度简化的示例，&lt;code&gt;direction&lt;/code&gt;的默认值是&lt;code&gt;ltr&lt;/code&gt;（left to right，从左到右），反过来就是&lt;code&gt;rtl&lt;/code&gt; ┑(￣Д ￣)┍ 。让元素成为&lt;code&gt;inline-block&lt;/code&gt;也是为了让&lt;code&gt;direction&lt;/code&gt;得以发挥效力，网上还有一个sample是使用了&lt;code&gt;table&lt;/code&gt;和&lt;code&gt;table-cell&lt;/code&gt;，这样可以消除&lt;code&gt;inline-block&lt;/code&gt;的幽灵空白，但是&lt;code&gt;table-cell&lt;/code&gt;可以应用的属性有限（我到现在都还经常得去查文档）……&lt;/p&gt;
&lt;h2 id=&quot;方法二：float&quot;&gt;&lt;a href=&quot;#方法二：float&quot; class=&quot;headerlink&quot; title=&quot;方法二：float&quot;&gt;&lt;/a&gt;方法二：&lt;code&gt;float&lt;/code&gt;&lt;/h2&gt;&lt;p&gt;这是个新手最爱用的暴力方法，只要让&lt;code&gt;input&lt;/code&gt;向右浮动就可以了。前提是需要对宽度加以限制，并且需要做好清除浮动的工作。哎呀但是说到这个[哔~]的[哔~]浮动啊就能洋洋洒洒写出老么长的，比狗屎还长的文章，随便百度一下也是[哔~]多的文章…&lt;/p&gt;
&lt;p&gt;我个人不爱用&lt;code&gt;float&lt;/code&gt;的主要原因是，在横向垂直对齐方面，除了像素级调整别无他法，也就是说你的css里会充斥着诸如&lt;code&gt;position:relative;top:3px&lt;/code&gt;或者&lt;code&gt;margin-top: 3px&lt;/code&gt;这样的代码…RWD不就是为了全自动化解放双手吗？！！为什么还要做像素级调整？！Tell me why?!!&lt;/p&gt;
&lt;h2 id=&quot;方法三：-position&quot;&gt;&lt;a href=&quot;#方法三：-position&quot; class=&quot;headerlink&quot; title=&quot;方法三： position&quot;&gt;&lt;/a&gt;方法三： &lt;code&gt;position&lt;/code&gt;&lt;/h2&gt;&lt;p&gt;&lt;code&gt;position&lt;/code&gt;的自由度相对高一些，上面两种方法都是比较有针对性的&lt;strong&gt;一行内&lt;/strong&gt;解决方法，&lt;code&gt;position&lt;/code&gt;就可以不受这个限制，无论是&lt;code&gt;relative&lt;/code&gt;还是暴力的&lt;code&gt;absolute&lt;/code&gt;都可以。无论是纯倒序还是自由顺序也都OK。&lt;/p&gt;
&lt;p&gt;使用&lt;code&gt;relative&lt;/code&gt;的话:&lt;br&gt;&lt;figure class=&quot;highlight css&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;gutter&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;1&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;2&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;3&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;4&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;5&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;6&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;7&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;8&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;9&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;selector-tag&quot;&gt;input&lt;/span&gt;,&lt;span class=&quot;selector-tag&quot;&gt;ul&lt;/span&gt;&amp;#123; &lt;span class=&quot;attribute&quot;&gt;position&lt;/span&gt;: relative; &amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;selector-tag&quot;&gt;input&lt;/span&gt;&amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &lt;span class=&quot;attribute&quot;&gt;width&lt;/span&gt;: &lt;span class=&quot;number&quot;&gt;25%&lt;/span&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &lt;span class=&quot;attribute&quot;&gt;left&lt;/span&gt;: &lt;span class=&quot;number&quot;&gt;75%&lt;/span&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;selector-tag&quot;&gt;ul&lt;/span&gt;&amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &lt;span class=&quot;attribute&quot;&gt;width&lt;/span&gt;: &lt;span class=&quot;number&quot;&gt;75%&lt;/span&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &lt;span class=&quot;attribute&quot;&gt;left&lt;/span&gt;: -&lt;span class=&quot;number&quot;&gt;25%&lt;/span&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;&lt;/p&gt;
&lt;p&gt;使用&lt;code&gt;absolute&lt;/code&gt;的话：&lt;br&gt;&lt;figure class=&quot;highlight css&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;gutter&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;1&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;2&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;3&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;4&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;5&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;selector-class&quot;&gt;.container&lt;/span&gt;&amp;#123; &lt;span class=&quot;attribute&quot;&gt;position&lt;/span&gt;: relative; &amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;selector-tag&quot;&gt;input&lt;/span&gt;&amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &lt;span class=&quot;attribute&quot;&gt;position&lt;/span&gt;: absolute;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &lt;span class=&quot;attribute&quot;&gt;right&lt;/span&gt;: &lt;span class=&quot;number&quot;&gt;0&lt;/span&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;&lt;/p&gt;
&lt;p&gt;垂直方向变换同理，只是如果需要&lt;code&gt;bottom:0&lt;/code&gt;的话，需要给父元素加上足够的&lt;code&gt;padding-bottom&lt;/code&gt;值，这样才不会出现DOM重叠的情况。&lt;/p&gt;
&lt;h2 id=&quot;方法四：transform&quot;&gt;&lt;a href=&quot;#方法四：transform&quot; class=&quot;headerlink&quot; title=&quot;方法四：transform&quot;&gt;&lt;/a&gt;方法四：&lt;code&gt;transform&lt;/code&gt;&lt;/h2&gt;&lt;p&gt;思路和&lt;code&gt;direction&lt;/code&gt;比较接近…先把父元素翻过去，再把子元素翻回来。这种思路在一些斜切的元素上也有所体现；但是其实吧………偶尔它会有定位漂移的情况，重新定位也是挺累人的…同样只能纯倒序。&lt;br&gt;&lt;figure class=&quot;highlight css&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;gutter&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;1&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;2&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;selector-class&quot;&gt;.container&lt;/span&gt;&amp;#123; &lt;span class=&quot;attribute&quot;&gt;transform&lt;/span&gt;: &lt;span class=&quot;built_in&quot;&gt;scaleX&lt;/span&gt;(-1); &amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;selector-tag&quot;&gt;input&lt;/span&gt;,&lt;span class=&quot;selector-tag&quot;&gt;ul&lt;/span&gt;&amp;#123; &lt;span class=&quot;attribute&quot;&gt;transform&lt;/span&gt;: &lt;span class=&quot;built_in&quot;&gt;scaleX&lt;/span&gt;(-1); &amp;#125;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;&lt;/p&gt;
&lt;p&gt;把&lt;code&gt;scaleX(-1)&lt;/code&gt;改成&lt;code&gt;rotateY(180deg)&lt;/code&gt;也可以嗯…奇淫技巧~问题大概是兼容性（你懂）。&lt;/p&gt;
&lt;h2 id=&quot;方法五：display&quot;&gt;&lt;a href=&quot;#方法五：display&quot; class=&quot;headerlink&quot; title=&quot;方法五：display&quot;&gt;&lt;/a&gt;方法五：&lt;code&gt;display&lt;/code&gt;&lt;/h2&gt;&lt;p&gt;这是个适用于多行元素的解决方案。&lt;code&gt;display&lt;/code&gt;中涉及元素排序的属性不多，唯独&lt;code&gt;table&lt;/code&gt;家族。话说Table布局虽然早就远离了我们，但是它带来的布局语法糖还真的是…鉴于这个是在多行场景下使用的解决方法，前面的HTML结构也要稍稍改一下：&lt;/p&gt;
&lt;figure class=&quot;highlight html&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;gutter&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;1&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;2&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;3&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;4&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;5&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;6&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;7&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;tag&quot;&gt;&amp;lt;&lt;span class=&quot;name&quot;&gt;div&lt;/span&gt; &lt;span class=&quot;attr&quot;&gt;class&lt;/span&gt;=&lt;span class=&quot;string&quot;&gt;&quot;container&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &lt;span class=&quot;tag&quot;&gt;&amp;lt;&lt;span class=&quot;name&quot;&gt;ul&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    &lt;span class=&quot;tag&quot;&gt;&amp;lt;&lt;span class=&quot;name&quot;&gt;li&lt;/span&gt;&amp;gt;&lt;/span&gt;菜单1&lt;span class=&quot;tag&quot;&gt;&amp;lt;/&lt;span class=&quot;name&quot;&gt;li&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    &lt;span class=&quot;tag&quot;&gt;&amp;lt;&lt;span class=&quot;name&quot;&gt;li&lt;/span&gt;&amp;gt;&lt;/span&gt;菜单2&lt;span class=&quot;tag&quot;&gt;&amp;lt;/&lt;span class=&quot;name&quot;&gt;li&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &lt;span class=&quot;tag&quot;&gt;&amp;lt;/&lt;span class=&quot;name&quot;&gt;ul&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &lt;span class=&quot;tag&quot;&gt;&amp;lt;&lt;span class=&quot;name&quot;&gt;input&lt;/span&gt; &lt;span class=&quot;attr&quot;&gt;type&lt;/span&gt;=&lt;span class=&quot;string&quot;&gt;&quot;text&quot;&lt;/span&gt; &lt;span class=&quot;attr&quot;&gt;placeholder&lt;/span&gt;=&lt;span class=&quot;string&quot;&gt;&quot;搜索&quot;&lt;/span&gt; /&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;tag&quot;&gt;&amp;lt;/&lt;span class=&quot;name&quot;&gt;div&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;figure class=&quot;highlight css&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;gutter&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;1&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;2&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;3&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;4&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;\* 这里是移动版的&lt;span class=&quot;selector-tag&quot;&gt;CSS&lt;/span&gt; *\&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;selector-class&quot;&gt;.container&lt;/span&gt;&amp;#123; &lt;span class=&quot;attribute&quot;&gt;display&lt;/span&gt;: table; &amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;selector-tag&quot;&gt;input&lt;/span&gt;&amp;#123; &lt;span class=&quot;attribute&quot;&gt;display&lt;/span&gt;: table-header-group; &amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;selector-tag&quot;&gt;ul&lt;/span&gt;&amp;#123; &lt;span class=&quot;attribute&quot;&gt;display&lt;/span&gt;: table-footer-group; &amp;#125;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;p&gt;这个方法的缺陷是，最多只能支持&lt;strong&gt;3个&lt;/strong&gt;元素的重排序，不过顺序倒是比较自由。表格组提供的属性有：&lt;code&gt;table-header-group&lt;/code&gt;、&lt;code&gt;table-row-group&lt;/code&gt;和&lt;code&gt;table-footer-group&lt;/code&gt;，对应&lt;code&gt;&amp;lt;thead&amp;gt;&lt;/code&gt;、&lt;code&gt;&amp;lt;tbody&amp;gt;&lt;/code&gt;和&lt;code&gt;&amp;lt;tfoot&amp;gt;&lt;/code&gt;元素，不过很多人都不知道这仨元素了吧2333……&lt;/p&gt;
&lt;h2 id=&quot;方法六：flex&quot;&gt;&lt;a href=&quot;#方法六：flex&quot; class=&quot;headerlink&quot; title=&quot;方法六：flex&quot;&gt;&lt;/a&gt;方法六：&lt;code&gt;flex&lt;/code&gt;&lt;/h2&gt;&lt;p&gt;如果在欧美地区，我肯定要把这个方法放在第一位…从我3年前第一次听说flex，到现在，我对flex的态度始终不变…什么时候你把兼容性给我搞好了再来找我（敲桌子）。对于一个支持大概是12年开始的“最新版语法”的设备，它写起来差不多是介样：&lt;br&gt;&lt;figure class=&quot;highlight css&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;gutter&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;1&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;2&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;3&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;selector-class&quot;&gt;.container&lt;/span&gt;&amp;#123; &lt;span class=&quot;attribute&quot;&gt;display&lt;/span&gt;: flex; &amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;selector-tag&quot;&gt;ul&lt;/span&gt;&amp;#123; &lt;span class=&quot;attribute&quot;&gt;order&lt;/span&gt;: &lt;span class=&quot;number&quot;&gt;1&lt;/span&gt;; &amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;selector-tag&quot;&gt;input&lt;/span&gt;&amp;#123; &lt;span class=&quot;attribute&quot;&gt;order&lt;/span&gt;: -&lt;span class=&quot;number&quot;&gt;1&lt;/span&gt;; &amp;#125;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;&lt;/p&gt;
&lt;p&gt;来，Read after me，师~呜~昂~~爽~。顺序自由、位置自由、Everything is 自由！Freedom！&lt;/p&gt;
&lt;p&gt;而关于如何区分“最新版”的问题，主要看&lt;code&gt;display&lt;/code&gt;：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;如果它是&lt;code&gt;box&lt;/code&gt;或者&lt;code&gt;box-{*}&lt;/code&gt;，那么这是09年的最古老版语法。&lt;/li&gt;
&lt;li&gt;如果它是&lt;code&gt;flexbox&lt;/code&gt;，那么这是11年的中间版语法（老外叫它tweener）。&lt;/li&gt;
&lt;li&gt;如果它和我这个写的一样，是&lt;code&gt;flex&lt;/code&gt;，那么这就是最新版了。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;所以关于兼容性处理的问题（扭头）…来下一个话题……&lt;/p&gt;
&lt;h2 id=&quot;方法七：-gird&quot;&gt;&lt;a href=&quot;#方法七：-gird&quot; class=&quot;headerlink&quot; title=&quot;方法七： gird&quot;&gt;&lt;/a&gt;方法七： &lt;code&gt;gird&lt;/code&gt;&lt;/h2&gt;&lt;p&gt;这是个比较新的方法，我有八成的把握这完全都是被bootstrap的gird system迫害的，MDN上也只有英法两种语言的文档…语法支持从Chrome 57/FF 52开始，然后我默默地看了一下我的Chrome版本…它赫然写着…55.0.2883.87 m……&lt;/p&gt;
&lt;p&gt;这一节我们就PASS了。诶嘿。&lt;/p&gt;
&lt;p&gt;留个文档的传送门有兴趣的小伙伴请自取→&lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/CSS/grid&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;【传送门】&lt;/a&gt;。&lt;/p&gt;
&lt;h2 id=&quot;总结&quot;&gt;&lt;a href=&quot;#总结&quot; class=&quot;headerlink&quot; title=&quot;总结&quot;&gt;&lt;/a&gt;总结&lt;/h2&gt;&lt;p&gt;CSS很强大，基本上就是想象x无穷大，不过我们还是应该回归传统，内容的归内容，样式的归样式。在保证HTML代码逻辑性和可读性的前提下，用上述奇淫技巧处理视觉上的各类问题。&lt;/p&gt;
&lt;p&gt;大家过年好，我是我家猫。&lt;/p&gt;
</content>
    
    <summary type="html">
    
      &lt;p&gt;时不时，偶尔，会有一些神奇的需求。在制作RWD页面的时候，偶尔会遇到元素重排序的问题。我之前遇到的情况，是PC版中，导航栏菜单横向排列，搜索框在最右侧；在移动版中，搜索栏跑到菜单的最上面，然后菜单纵向排列。非常典型的菜单处理策略。&lt;/p&gt;
&lt;p&gt; | 菜单1 | 菜单2 | ··· | 菜单n | 搜索栏 |&lt;/p&gt;
&lt;p&gt;变成&lt;/p&gt;
&lt;p&gt; | 搜索栏 |&lt;br&gt; | 菜单1 |&lt;br&gt; | 菜单2 |&lt;br&gt; …&lt;/p&gt;
&lt;p&gt;你准备怎么处理？&lt;br&gt;
    
    </summary>
    
    
      <category term="CSS" scheme="http://hikarievo.me/tags/CSS/"/>
    
  </entry>
  
  <entry>
    <title>如何快速学习前端</title>
    <link href="http://hikarievo.me/2017/01/12/learning-f2e-at-udacity/"/>
    <id>http://hikarievo.me/2017/01/12/learning-f2e-at-udacity/</id>
    <published>2017-01-12T15:13:00.000Z</published>
    <updated>2017-01-26T10:00:04.971Z</updated>
    
    <content type="html">&lt;p&gt;前阵子在找资料的时候，从Google Fundamental网站发现一个学习链接，点过去以后发现居然是一个中文网站，而且课程提供方居然是像Google、Facebook、Amazon这种级别的厂商。因为有免费试听，于是就开了一个前端学位，然后发现免费试听只有一周时间…于是就疯狂看了一周……&lt;/p&gt;
&lt;p&gt;结论而言…这是我见过的网校（加上我听说过的培训班中）性价比最高的…这个名为&lt;strong&gt;&lt;a href=&quot;https://cn.udacity.com/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;优达学城&lt;/a&gt;&lt;/strong&gt;的网站，实际上是一个国际化的计算机技能培训（网校）……2017年的第一篇文，居然是没给广告费的网校广告（捂脸……），下面说一下这个网站的优点：&lt;br&gt;&lt;a id=&quot;more&quot;&gt;&lt;/a&gt;&lt;br&gt;先说价格，网站提供包月和包年两种套餐，全年价格不足5000，而且最近的活动是，如果能在一年内完成所有课程，可以返还一半的学费…横向比较了一下其他比较火的网校（为什么他们都不在官网上贴价格…），随便一个三个月或者半年的培训班都是8000起跳，“名”校上万的也比比皆是。&lt;/p&gt;
&lt;p&gt;内容的话…是从0基础一直讲到JS编程基础。HTML元素，语义化，CSS基础，布局，框架，JS入门，jQuery入门，数据类型，作用域，闭包，原型链，构造函数，函数类，性能优化，API…等等等等……这种内容量在国内的培训一般会拆成两到三个班，价格估计没有个两三万是搞不下来的。而且课程节奏非常快，按照课程规划，学员在3个月左右就能够掌握HTML与CSS还原简单静态网页的基本技巧，6个月的时候就开始学习原型链与构造函数了…这个节奏讲真比我自己学的时候还要快很多……不过野生半吊子都是三天两天，和这种系统规划过的课程没法比。&lt;/p&gt;
&lt;p&gt;当然光凭这点性价比来说，根本不足以让我专门写一篇什么东西来推荐…什么内容紧贴实际项目这种屁话就不说了，它的每节课都有大量练习题和详细讲解，同时在每阶段课程的最后，都会提供一个项目，类似于大作业，需要整体提交代码，并且得到校方的反馈（这种反馈形式我就不晓得了…毕竟我一个都没有提交），宣传中宣称是有个性定制化的服务的，提交了总之是会有批改的吧。&lt;/p&gt;
&lt;p&gt;同时在课程几个大阶段后（简单来看就是应用能力的不同阶段），都会提供一定的求职指导，包括如何准备简历，如何写求职信，如何面试等等，并提供专门的反馈服务（享受不到好可惜）。我简单看了几个关于面试失败的经验分享视频，也是非常有启发意义的…&lt;/p&gt;
&lt;p&gt;最重要的最后说，以Google为首制作的这份课程中，在一开始就提出了“解决问题的能力”，这也是我在最近一年中倍感困扰的问题。身边的人非常缺乏解决问题的能力，让她照着抄似乎可以；但是让她发现问题的突破口，寻找合适的工具来解决问题，似乎是一种天方夜谭。这也是当前国内任何培训班都做不到的一点，也可以说是我国教育方式的通病。&lt;/p&gt;
&lt;p&gt;而这份课程在一开始就反复强调，自己探寻和阅读文档很重要，尽量让自己在学习初期就体会到这种重要性，并且能够轻松地完成这些事。同时在课程的推进中，也在不断地使用各种参考资料，让学员自己学会探索。这种潜移默化的影响具体效果如何我不敢评价，但总比那些根本不知道有“文档”这种东西存在的人要好太多了。&lt;/p&gt;
&lt;p&gt; 要坚持不懈地自己寻找答案，在努力寻找答案的过程中可以学到最多东西。如果遇到不理解的术语，花些时间理解它，使用外部资源补充学习内容和成为更独立的学习者很重要。你要钻研课程，例如在每天工作时阅读相关文档。因此，在这里你要确保，自己从一开始就觉得这样做很舒服。&lt;/p&gt;
&lt;p&gt;学习对于前端开发者来说，就像吃饭一样，简单、自然。因为前端领域太过年轻，而风起云涌变化莫测，今天的潮流转眼就成了明日黄花，不把这种追逐当做乐趣，就还是不要学了。&lt;/p&gt;
&lt;p&gt;哦对了关于这个Title…最快的方式当然是读文档…如果你有翻字典的爱好的话，读文档会很合口味。但是有一些编程思想和应用细节，还是买书比较合适。上课是我最不推荐也最不喜欢的学习方式，如果觉得自己一定要报个什么班才能学会的话，那就试试看这篇文章推荐的那个网站好了…。&lt;/p&gt;
</content>
    
    <summary type="html">
    
      &lt;p&gt;前阵子在找资料的时候，从Google Fundamental网站发现一个学习链接，点过去以后发现居然是一个中文网站，而且课程提供方居然是像Google、Facebook、Amazon这种级别的厂商。因为有免费试听，于是就开了一个前端学位，然后发现免费试听只有一周时间…于是就疯狂看了一周……&lt;/p&gt;
&lt;p&gt;结论而言…这是我见过的网校（加上我听说过的培训班中）性价比最高的…这个名为&lt;strong&gt;&lt;a href=&quot;https://cn.udacity.com/&quot;&gt;优达学城&lt;/a&gt;&lt;/strong&gt;的网站，实际上是一个国际化的计算机技能培训（网校）……2017年的第一篇文，居然是没给广告费的网校广告（捂脸……），下面说一下这个网站的优点：&lt;br&gt;
    
    </summary>
    
    
      <category term="杂谈" scheme="http://hikarievo.me/tags/%E6%9D%82%E8%B0%88/"/>
    
      <category term="推荐" scheme="http://hikarievo.me/tags/%E6%8E%A8%E8%8D%90/"/>
    
      <category term="初心者" scheme="http://hikarievo.me/tags/%E5%88%9D%E5%BF%83%E8%80%85/"/>
    
  </entry>
  
  <entry>
    <title>CSS background 属性使用手册</title>
    <link href="http://hikarievo.me/2016/05/21/detailed-introduction-of-background-properties/"/>
    <id>http://hikarievo.me/2016/05/21/detailed-introduction-of-background-properties/</id>
    <published>2016-05-21T07:03:35.000Z</published>
    <updated>2016-06-05T05:39:36.286Z</updated>
    
    <content type="html">&lt;p&gt;&lt;code&gt;background&lt;/code&gt; 属性是CSS中用于设置元素背景的属性，最简单的&lt;code&gt;background&lt;/code&gt;属性名，是针对背景若干设定的合并简写，最早的CSS只能使用单一背景图片，而在现在却可以设置多个背景图片。而不用图片的话，最早的background只能使用纯色填充，现在却可以使用各种渐变效果。现在所用的模型来自于CSS Backgrounds and Borders Module Level 3所定义的规范，主要分成了8个子属性。&lt;br&gt;&lt;a id=&quot;more&quot;&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h2 id=&quot;背景颜色之-background-color&quot;&gt;&lt;a href=&quot;#背景颜色之-background-color&quot; class=&quot;headerlink&quot; title=&quot;背景颜色之 background-color&quot;&gt;&lt;/a&gt;背景颜色之 background-color&lt;/h2&gt;&lt;p&gt;&lt;code&gt;background-color&lt;/code&gt;是最早，最古老，最…常用的属性之一，取值是唯一的，颜色值。&lt;/p&gt;
&lt;h2 id=&quot;背景图片之-background-image&quot;&gt;&lt;a href=&quot;#背景图片之-background-image&quot; class=&quot;headerlink&quot; title=&quot;背景图片之 background-image&quot;&gt;&lt;/a&gt;背景图片之 background-image&lt;/h2&gt;&lt;p&gt;&lt;code&gt;background-image&lt;/code&gt;顾名思义是设置背景“图片”的，这里的图片并非我们通常意义上理解的“图片”，而是由CSS Image Values and Replaced Content Module所规定的一系列内容，用以替代CSS2中所规定的&lt;code&gt;background-image&lt;/code&gt;属性与&lt;code&gt;list-style-image&lt;/code&gt;属性中的&lt;code&gt;url&lt;/code&gt;参数，或者作为伪元素&lt;code&gt;content&lt;/code&gt;的值。现在浏览器也没有完全实现这些，可用的包括&lt;code&gt;url()&lt;/code&gt;引用图片，和渐变“图片”，然后以逗号分隔所有图片（如果有）。&lt;/p&gt;
&lt;h3 id=&quot;CSS-渐变&quot;&gt;&lt;a href=&quot;#CSS-渐变&quot; class=&quot;headerlink&quot; title=&quot;CSS 渐变&quot;&gt;&lt;/a&gt;CSS 渐变&lt;/h3&gt;&lt;p&gt;CSS渐变分成两种，&lt;code&gt;linear-gradient()&lt;/code&gt;的线性渐变和&lt;code&gt;radial-gradient()&lt;/code&gt;的径向渐变。两个渐变在早期不同浏览器上的实现语法大相径庭，所以用的人较少，还是倾向于使用图片，现在各个浏览器的显示和实现已经基本趋向于一致，而且在手机端也有比较好的实现，在移动端开发完全可以广泛使用了（但是在兼容IE9-的时候还是╮(╯_╰)╭），下面是详细介绍，也可以用&lt;a href=&quot;http://www.colorzilla.com/gradient-editor/&quot; title=&quot;Ultimate CSS Gradient Generator&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;生成器&lt;/a&gt;来搞定啦。&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;线性渐变&lt;/strong&gt;：&lt;code&gt;linear-gradient(&amp;lt;angle&amp;gt;, &amp;lt;start&amp;gt;[, &amp;lt;stop&amp;gt;]+);&lt;/code&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;ul&gt;
&lt;li&gt;&amp;lt;angle&amp;gt; 可以选择 to top、to bottom、to left、to right这4个关键字和 *deg 设置， 0deg（↓）就相当于 to bottom， 90deg（←） 相当于 to left，以此类推。&lt;/li&gt;
&lt;li&gt;&amp;lt;start&amp;gt;，&amp;lt;stop&amp;gt; 的值则为&lt;code&gt;&amp;lt;color&amp;gt;[ &amp;lt;position&amp;gt;]?&lt;/code&gt;，第一个和最后一个颜色不用写&amp;lt;position&amp;gt;，中间的颜色如果不写的话，所有的颜色就会平均分布。&lt;/li&gt;
&lt;/ul&gt;
&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;径向渐变&lt;/strong&gt;：&lt;br&gt;&lt;code&gt;radial-gradient([ [ &amp;lt;shape&amp;gt; || &amp;lt;size&amp;gt; ] [ at &amp;lt;position&amp;gt; ]? , | at &amp;lt;position&amp;gt;, ]? &amp;lt;color-stop&amp;gt; [ , &amp;lt;color-stop&amp;gt; ]+)&lt;/code&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;我本想把这个语法简写一下的…减来简去发现还是这么写就好了（毕竟人家规范就是这么写的，果然深思熟虑过）…从后往前说&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&amp;lt;color-stop&amp;gt; 和线性渐变一样，&lt;code&gt;&amp;lt;color&amp;gt;[ &amp;lt;position&amp;gt;]?&lt;/code&gt;，也可以设定多个颜色值，而不写位置的话，就按照&lt;size&gt;规定的值平均分布。&lt;/size&gt;&lt;/li&gt;
&lt;li&gt;颜色前面一大串：定义径向渐变的圆心、位置和渐变模式。&lt;ul&gt;
&lt;li&gt;&amp;lt;shape&amp;gt; 是形状，可选值为&lt;code&gt;ellipses&lt;/code&gt;（椭圆）或者&lt;code&gt;circles&lt;/code&gt;（正圆），如果整个元素是个正方形的话，两个形状就都一样啦。&lt;/li&gt;
&lt;li&gt;&amp;lt;size&amp;gt; 是尺寸，可以定义渐变的数值半径，如果形状是椭圆的话，需要填写两个尺寸值，按顺序是水平半径和垂直半径，此时尺寸可以写百分数。&lt;/li&gt;
&lt;li&gt;尺寸另外还有4个关键字可用：&lt;code&gt;closest-side&lt;/code&gt;（最近的边）、&lt;code&gt;farthest-side&lt;/code&gt;（最远的边）、&lt;code&gt;closest-corner&lt;/code&gt;（最近的角）、&lt;code&gt;farthest-corner&lt;/code&gt;（最远的角），这4个关键字是指圆心相对于元素而言的，顾名思义想一下就好。&lt;/li&gt;
&lt;li&gt;&amp;lt;position&amp;gt; 是圆心位置，需要在位置前面加上&lt;code&gt;at&lt;/code&gt;，可以用position常用的关键字，也可以使用数值定义。&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;比如如下三行代码，就是等价的：&lt;br&gt;&lt;figure class=&quot;highlight css&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;gutter&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;1&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;2&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;3&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;selector-tag&quot;&gt;radial-gradient&lt;/span&gt;(&lt;span class=&quot;selector-tag&quot;&gt;yellow&lt;/span&gt;, &lt;span class=&quot;selector-tag&quot;&gt;green&lt;/span&gt;);&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;selector-tag&quot;&gt;radial-gradient&lt;/span&gt;(&lt;span class=&quot;selector-tag&quot;&gt;ellipse&lt;/span&gt; &lt;span class=&quot;selector-tag&quot;&gt;at&lt;/span&gt; &lt;span class=&quot;selector-tag&quot;&gt;center&lt;/span&gt;, &lt;span class=&quot;selector-tag&quot;&gt;yellow&lt;/span&gt; 0%, &lt;span class=&quot;selector-tag&quot;&gt;green&lt;/span&gt; 100%);&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;selector-tag&quot;&gt;radial-gradient&lt;/span&gt;(&lt;span class=&quot;selector-tag&quot;&gt;farthest-corner&lt;/span&gt; &lt;span class=&quot;selector-tag&quot;&gt;at&lt;/span&gt; 50% 50%, &lt;span class=&quot;selector-tag&quot;&gt;yellow&lt;/span&gt;, &lt;span class=&quot;selector-tag&quot;&gt;green&lt;/span&gt;);&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;重复渐变&lt;/strong&gt;：&lt;code&gt;repeating-linear-gradient()&lt;/code&gt;和&lt;code&gt;repeating-radial-gradient()&lt;/code&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;ul&gt;
&lt;li&gt;用法同上，只是这回是重复渐变了而已。&lt;a href=&quot;http://bennettfeely.com/gradients/&quot; title=&quot;CSS Gradients with background-blend-mode&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;这里&lt;/a&gt;有一些很漂亮的Demo，当然它主要是为展示&lt;code&gt;background-blend-mode&lt;/code&gt;属性建立的。&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id=&quot;背景重复之-background-repeat&quot;&gt;&lt;a href=&quot;#背景重复之-background-repeat&quot; class=&quot;headerlink&quot; title=&quot;背景重复之 background-repeat&quot;&gt;&lt;/a&gt;背景重复之 background-repeat&lt;/h2&gt;&lt;p&gt;&lt;code&gt;background-repead&lt;/code&gt;用于设置背景的重复方式，可选值有下面几种：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;no-repeat&lt;/code&gt; 不重复，等价于&lt;code&gt;no-repeat no-repeat&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;repeat-X&lt;/code&gt; X轴方向（横向）重复，等价于&lt;code&gt;repeat no-repeat&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;repeat-Y&lt;/code&gt; Y轴方向（纵向）重复，等价于&lt;code&gt;no-repeat repeat&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;repeat&lt;/code&gt; 重复平铺，等价于&lt;code&gt;repeat repeat&lt;/code&gt;&lt;br&gt;除了这4个常用的，还有两个…大概没什么人用，兼容性也不是很好的取值：&lt;/li&gt;
&lt;li&gt;&lt;code&gt;round&lt;/code&gt; 图像在指定方向平铺，会根据显示空间的大小缩放图像（什么时候缩放，什么时候增减平铺的数量是由浏览器决定的）&lt;/li&gt;
&lt;li&gt;&lt;code&gt;space&lt;/code&gt; 图像会尽可能重复，但不裁剪，第一张和最后一张固定在元素两端，剩下的均匀分布。此时&lt;code&gt;background-position&lt;/code&gt;属性被忽视。另外只有在图像大过元素的时候会发生裁剪。&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id=&quot;背景固定之-background-attachment&quot;&gt;&lt;a href=&quot;#背景固定之-background-attachment&quot; class=&quot;headerlink&quot; title=&quot;背景固定之 background-attachment&quot;&gt;&lt;/a&gt;背景固定之 background-attachment&lt;/h2&gt;&lt;p&gt;&lt;code&gt;background-attachment&lt;/code&gt;用于设置背景相对的固定方式，可选值有：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;scroll&lt;/code&gt; 默认值，背景相对于元素固定。&lt;/li&gt;
&lt;li&gt;&lt;code&gt;fixed&lt;/code&gt; 背景相对于整个窗口固定。随着最近全屏大图网站的流行，这种背景固定模式也日渐多见起来。&lt;/li&gt;
&lt;li&gt;&lt;code&gt;local&lt;/code&gt; 背景相对于元素内容固定，如果元素内有滚动条，背景会随着内容滚动。&lt;br&gt;&lt;code&gt;local&lt;/code&gt;这种模式我们几乎不怎么用到，这里找到&lt;a href=&quot;http://lea.verou.me/2012/04/background-attachment-local/&quot; title=&quot;Pure CSS scrolling shadows with background-attachment: local&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;一篇文章&lt;/a&gt;，作者写了一个Demo，在元素出现滚动条的时候，会在它的可滚动方向出现阴影。虽然是属于交互设计范畴，但随着各个网站更加强调重视用户体验，这种需求是早晚的事，而作者的Demo是非常有趣（且有效率）的实现方式。&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id=&quot;背景定位之-background-position&quot;&gt;&lt;a href=&quot;#背景定位之-background-position&quot; class=&quot;headerlink&quot; title=&quot;背景定位之 background-position&quot;&gt;&lt;/a&gt;背景定位之 background-position&lt;/h2&gt;&lt;p&gt;&lt;code&gt;background-positon&lt;/code&gt;，顾名思义就是用来定位的…但是这个定位吧…语法很复杂（或者说很随意）。可用的各种指示方向的关键字，也可以用数字单位或者百分比，写法有下面几种：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;并列写两个关键字（或值），第一个值代表它的水平位置，第二个值代表它的垂直位置（这个和&lt;code&gt;padding&lt;/code&gt;、&lt;code&gt;margin&lt;/code&gt;、&lt;code&gt;border&lt;/code&gt;这些先上下再左右的属性刚好是反的…）。另外如果两个都是关键字，那么位置可以交换，也就是说，&lt;code&gt;center left&lt;/code&gt;是合法的，然而&lt;code&gt;50% left&lt;/code&gt;不行。&lt;/li&gt;
&lt;li&gt;只写一个关键字（或值），那么它的第二个值就默认为&lt;code&gt;center&lt;/code&gt;（居中）。&lt;/li&gt;
&lt;li&gt;三、四值，可以从元素的四周定位，比如离右边10px，底边5px，就可以写成&lt;code&gt;right 10px bottom 5px&lt;/code&gt;，两组&lt;code&gt;关键字-值&lt;/code&gt;对可以交换位置，也可以用&lt;code&gt;center&lt;/code&gt;替代&lt;code&gt;关键字-值&lt;/code&gt;。这种写法目前（2016-06）只有FF支持。&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id=&quot;背景裁切之-background-clip&quot;&gt;&lt;a href=&quot;#背景裁切之-background-clip&quot; class=&quot;headerlink&quot; title=&quot;背景裁切之 background-clip&quot;&gt;&lt;/a&gt;背景裁切之 background-clip&lt;/h2&gt;&lt;p&gt;&lt;code&gt;background-clip&lt;/code&gt;是设定背景所覆盖的范围的属性。可选值有：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;border-box&lt;/code&gt; 默认值，背景延伸到边框下，但是只有当边框的颜色是半透明的时候才能看到延伸过来的背景。&lt;/li&gt;
&lt;li&gt;&lt;code&gt;padding-box&lt;/code&gt; 边框下没有背景。&lt;/li&gt;
&lt;li&gt;&lt;code&gt;content-box&lt;/code&gt; 只有内容下有背景（padding的空间里都没有）&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id=&quot;背景原点之-background-origin&quot;&gt;&lt;a href=&quot;#背景原点之-background-origin&quot; class=&quot;headerlink&quot; title=&quot;背景原点之 background-origin&quot;&gt;&lt;/a&gt;背景原点之 background-origin&lt;/h2&gt;&lt;p&gt;&lt;code&gt;background-origin&lt;/code&gt;指定了背景图片定位的原点。属性取值与&lt;code&gt;background-clip&lt;/code&gt;相同，但是clip是会对背景图片进行裁切，而origin是用于定位的。&lt;/p&gt;
&lt;p&gt;可以看这个&lt;a href=&quot;http://codepen.io/anon/pen/RNVKvj/?editors=1100&quot; title=&quot;background-clip 和 background-orign 对比&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;Demo&lt;/a&gt;，展现得比较清晰了。&lt;/p&gt;
&lt;h2 id=&quot;背景尺寸之-background-size&quot;&gt;&lt;a href=&quot;#背景尺寸之-background-size&quot; class=&quot;headerlink&quot; title=&quot;背景尺寸之 background-size&quot;&gt;&lt;/a&gt;背景尺寸之 background-size&lt;/h2&gt;&lt;p&gt;&lt;code&gt;background-size&lt;/code&gt;用来设置背景尺寸，可选值有：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;一对值\百分比或&lt;code&gt;auto&lt;/code&gt;，百分比是相对于&lt;code&gt;background-origin&lt;/code&gt;所设置的尺寸而言的，&lt;code&gt;auto&lt;/code&gt;就是图片原本的尺寸，两个数值先宽后高。&lt;/li&gt;
&lt;li&gt;&lt;code&gt;cover&lt;/code&gt; 缩放图片，令其完全覆盖背景区域，可能导致图片某些区域不可见。&lt;/li&gt;
&lt;li&gt;&lt;code&gt;contain&lt;/code&gt; 缩放图片，令其以最大尺寸完整展现在背景区域中，可能导致背景某些区域变成空白。&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id=&quot;变形金刚之-background&quot;&gt;&lt;a href=&quot;#变形金刚之-background&quot; class=&quot;headerlink&quot; title=&quot;变形金刚之 background&quot;&gt;&lt;/a&gt;变形金刚之 background&lt;/h2&gt;&lt;p&gt;&lt;code&gt;background&lt;/code&gt;是上面8个属性的总和…可以把所有属性写在一起。顺序不限，以空格隔开即可，但有几个需要注意的点：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;如果需要设定背景尺寸，写法是&lt;code&gt;&amp;lt;position&amp;gt;/&amp;lt;size&amp;gt;&lt;/code&gt;，必须设定 &amp;lt;position&amp;gt; 的同时，以 / 分隔 &amp;lt;position&amp;gt; 和 &amp;lt;size&amp;gt;。&lt;/li&gt;
&lt;li&gt;&lt;code&gt;background-clip&lt;/code&gt;和&lt;code&gt;background-origin&lt;/code&gt;的属性，如果只写了一个值，那么会同时应用在两个属性上，如果写了两个值，那么前者是&lt;code&gt;background-origin&lt;/code&gt;，而后者是&lt;code&gt;background-clip&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;没有设置的会被设为默认值，之后也可以单独设置，这个和&lt;code&gt;padding&lt;/code&gt;之类简写的方式相似。&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id=&quot;合体战士之多重背景&quot;&gt;&lt;a href=&quot;#合体战士之多重背景&quot; class=&quot;headerlink&quot; title=&quot;合体战士之多重背景&quot;&gt;&lt;/a&gt;合体战士之多重背景&lt;/h2&gt;&lt;p&gt;从CSS3时代开始，CSS背景开始支持多个背景图，设置在一起了。&lt;/p&gt;
&lt;p&gt;只要将每张背景图以逗号分开，那么浏览器就会依次加载，并把写在后面的叠在上面。&lt;/p&gt;
&lt;p&gt;对于分开设置的背景属性，也可以以逗号分隔，分别设置。但是如果，你只想设置其中某一张图片的特定属性，那你就得把其他的也都写上才行…&lt;/p&gt;
&lt;p&gt;以及，背景颜色是唯一的（摊手），在使用&lt;code&gt;background&lt;/code&gt;简写的时候，背景颜色要设置在最后一个逗号之后。&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;还有什么？&lt;/p&gt;
&lt;p&gt;还有，在去年最新的&lt;a href=&quot;https://drafts.fxtf.org/compositing-1/#ltblendmodegt&quot; title=&quot;Compositing and Blending Level 1&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;Compositing and Blending&lt;/a&gt;草案中，提出了&lt;strong&gt;混合模式&lt;/strong&gt;的规范草案，涉及到背景的属性是&lt;code&gt;background-blend-mode&lt;/code&gt;，于本文成文时，只有Chrome和FF两大浏览器支持这一属性。&lt;/p&gt;
&lt;p&gt;如果各位有玩过Photoshop的话，应该会对Photoshop中的混合模式有所耳闻，二者意思差不多。&lt;code&gt;background-blend-mode&lt;/code&gt;的可选参数包括：normal（普通），multiply（正片叠底），screen（滤色），overlay（叠加），darken（变暗），lighten（变亮），color-dodge（颜色减淡），color-burn（颜色加深），hard-light（强光），soft-light（柔光），difference（差值），exclusion（排除），hue（色相），saturation（饱和度），color（颜色），luminosity（明度）。&lt;/p&gt;
&lt;p&gt;这些参数的中文都是我根据Photoshop的混合模式直接翻译过来的（繁体用户可以参考&lt;a href=&quot;http://ww4.sinaimg.cn/large/67020811gw1eob5zrx1cpj20ab0eataq.jpg&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;这里&lt;/a&gt;），规范草案中也给出了每种混合模式的算法和演示效果，因为时间问题我就不一一验证效果了，如果有出入均以实际效果为准。MDN上有实际演示的&lt;a href=&quot;https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-blend-mode&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;Demo&lt;/a&gt;，我前面提到的那个&lt;a href=&quot;http://bennettfeely.com/gradients/&quot; title=&quot;CSS Gradients with background-blend-mode&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;网站&lt;/a&gt;也有很多实际的展示。&lt;/p&gt;
&lt;p&gt;当然这些混合模式也可以应用在其他图像（比如SVG）上，我觉得这完全是为了让那些设计师和前端工程师之间少一些争吵多一些真诚（摊手）。&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;&lt;strong&gt;参考资料&lt;/strong&gt;&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;&lt;a href=&quot;https://developer.mozilla.org/zh-CN/docs/Web/CSS/background&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;MDN相关页面&lt;/a&gt;：除了上面说的，还有能否应用于 CSS 动画，以及兼容性的相关资料。&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://drafts.csswg.org/css-backgrounds-3/#backgrounds&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;W3C规范&lt;/a&gt;：原始规范文档&lt;/li&gt;
&lt;/ol&gt;
</content>
    
    <summary type="html">
    
      &lt;p&gt;&lt;code&gt;background&lt;/code&gt; 属性是CSS中用于设置元素背景的属性，最简单的&lt;code&gt;background&lt;/code&gt;属性名，是针对背景若干设定的合并简写，最早的CSS只能使用单一背景图片，而在现在却可以设置多个背景图片。而不用图片的话，最早的background只能使用纯色填充，现在却可以使用各种渐变效果。现在所用的模型来自于CSS Backgrounds and Borders Module Level 3所定义的规范，主要分成了8个子属性。&lt;br&gt;
    
    </summary>
    
    
      <category term="CSS" scheme="http://hikarievo.me/tags/CSS/"/>
    
  </entry>
  
  <entry>
    <title>从菜鸟到行家，从面条说起</title>
    <link href="http://hikarievo.me/2016/04/02/from-newbie-to-veteran/"/>
    <id>http://hikarievo.me/2016/04/02/from-newbie-to-veteran/</id>
    <published>2016-04-02T06:20:25.000Z</published>
    <updated>2016-06-04T05:48:42.250Z</updated>
    
    <content type="html">&lt;p&gt;这几天在给公司页面加新功能，前前后后改了三四天。我司的代码混乱不堪的程度，让“找到需要改的部分”都成为了一项技能，对，我时不时就会收到帮忙找文件的请求……添功能本身不是件麻烦事，大部分的时间用来整理代码结构和逻辑。我把其中一部分面条截图给小伙伴，相顾无言，唯有泪千行。&lt;/p&gt;
&lt;p&gt;花了一整天把功能整理好，重写了方法，回头想了想，我大概又 Level Up 了。如果说美工和设计师，打字工和程序员有什么质的区别，可能很多人都会说，学习和思考。学什么，想什么，如何判断哪些东西是自己要学的，如何判断哪些东西是自己该想的，却鲜少有人提及。我也只是想站在设计师与程序员的夹缝地带聊一聊这些事。&lt;/p&gt;
&lt;a id=&quot;more&quot;&gt;&lt;/a&gt;
&lt;p&gt;在整理代码的时候，跃入眼帘的词，是&lt;strong&gt;抽象化&lt;/strong&gt;，这个词对于程序员来说并不陌生，但是对于设计师来说可能就不太熟悉了。&lt;/p&gt;
&lt;p&gt;抽象化，虽然听起来就很抽象，但其实我们早就很熟悉这种模式了。早在小学乃至幼儿园时期，我们学算术的时候，老师从来不会直接讲1+1=？，而是会说，这里有1个苹果，再拿来1个苹果，于是我们有了几个苹果？然后再多次举例，1个苹果，1棵树，1栋房子，1个人，虽然都是不一样的东西，但是我们都可以用“1”来表示。这应该就是我能想到的，我们最早接触抽象化这一思考行为的实际例子了。&lt;/p&gt;
&lt;p&gt;而抽象化在设计、艺术上更是常见的很了。最广为人知的例子应属毕加索的《牛》（The Bull），这套画一直是用来解释如何抽象精简概念的名作（顺便还搜到一篇文章 &lt;a href=&quot;http://www.fastcodesign.com/3034240/how-apple-uses-picasso-to-teach-employees-about-product-design&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;How Apple Uses Picasso To Teach Employees About Product Design&lt;/a&gt; 2333）。&lt;/p&gt;
&lt;figure&gt;&lt;img src=&quot;http://7qnahw.com1.z0.glb.clouddn.com/2016/the_bull.jpg&quot; alt=&quot;the Bull&quot;&gt;&lt;figcaption&gt;牛——毕加索&lt;/figcaption&gt;&lt;br&gt;&lt;/figure&gt;

&lt;p&gt;谷歌公司的 Material Design 也是基于真实材料的构想，使用光效、表面质感、运动感这三个要点，在手机屏幕上呈现具有真实感，而适用性极佳的设计。&lt;/p&gt;
&lt;p&gt;好了，小学生就学过的抽象化和谷歌公司所使用的抽象化有什么不同呢？答案是，没有区别，是一样的行为。只是所用之处和所用情景不同，才导致了不同的结果。&lt;/p&gt;
&lt;p&gt;回到我们的面条上…在程序中所指的面条并不可食用，而是指那些&lt;a href=&quot;//zh.wikipedia.org/wiki/面条式代码&quot;&gt;结构复杂逻辑混乱的代码块&lt;/a&gt;。被迫学了点代码的设计师，就是最容易写出面条代码的一类人群。但是我们是设计师嘛，为什么要操心代码的事，操心我们的设计稿就好，然而，你确定你的设计稿不是乱成一锅馄饨？&lt;/p&gt;
&lt;p&gt;一般来说，界面设计过程中的抽象化的过程大概是这样的：找到复用性高的组件，将其特点总结出来，并制定成一个在某些方面可定制的套件。感觉是否似曾相识？如果你曾经看过 Material Design 的 Guideline、VI或者任何前端框架的组件库，它们基本都是按照相似的方式排列组件的，然而有些厂商（我就不点名了2333）的界面，界面元素不统一、样式不统一、反馈不统一、设计语言不一致…简直噩梦，全心全意为用户，添堵。&lt;/p&gt;
&lt;p&gt;我们现在习惯的设计过程大抵是反过来的，先设计组件，再组合模式。这是因为前人都在不断的实践中帮我们总结好了这些规律，我们只需要站在巨人的肩膀上去套用就可以了。尽管如此，经验的巨大差别还是会反映在作品中。一个按钮有几种状态？有哪些场合需要区别使用？一段提示消息有几种展现方式？每种方式都适用于何种情形？这就是所谓细节的魔鬼，在习惯了高度抽象化的组件之后，反而缺乏对具体场景的分析和思考，无法超越框架为设计者框下的框架。&lt;/p&gt;
&lt;p&gt;写代码的时候更需要这种高度抽象的能力，一切编程问题都可以归结到两样东西上，一是数据结构，二是算法。在前端世界，这个绝大多数的“程序员”都是非科班出身的世界里，拥有这两项技能的人，微乎其微。很多地方都会指出，学软件工程或者 CS 出身的人，大都不屑于去写前端。HTML也不过是 markup，CSS更是混乱不堪毫无逻辑（连编程的毛毛都算不上）还跟DOM高度耦合，唯一稍微接近于程序语言的 JavaScript，也以其自身糟糕的过往而成功被科班程序员踹进垃圾堆。而令人庆幸的是，大部分前端业者都是自学成才，而他们最引以为傲的技能也是——自学。&lt;/p&gt;
&lt;p&gt;值得庆幸的是，很多需要学习的东西，早就被前人整理为系统的教学方法，无论是设计中的三大构成，还是编程中的数据结构，都可以说是通向专家的捷径（教育本身也就是为此诞生的…高效地传递知识），但是很多时候我们的能力让我们无法看到其中的本质，我们的态度让我们不屑于挣扎于无趣的基础知识中，而只能从浅层去关注实现的细节，导致我们的学习过程更像是来回翻滚，本应在一开始打好的基本功，却在之后一样样补（切记，出来混，迟早是要还的）。&lt;/p&gt;
&lt;p&gt;如果说学习就是多看，多记，多背。思考就是从看到的记住的东西中，整理总结出一套自己的模式和方法。如果说学习是学习理论基础、模式范式，思考就是整理它在实际应用中的具体细节。当你积累了足够多的实例，也掌握了足够多的概念和方法论，那应该就可以向菜鸟的自己说永别，而进入新世界了。至于专家，或者大师，他们是创造这个世界的人，创造并奠定了整个学科体系的人，而他们所做的，也不过就是从已有的（和尚未有的）实例中，抽象出新的概念，进而推进整个学科更进一步的发展。不过这又是另一码事，而我等初阶小屁孩触不可及的另一次元了。&lt;/p&gt;
</content>
    
    <summary type="html">
    
      &lt;p&gt;这几天在给公司页面加新功能，前前后后改了三四天。我司的代码混乱不堪的程度，让“找到需要改的部分”都成为了一项技能，对，我时不时就会收到帮忙找文件的请求……添功能本身不是件麻烦事，大部分的时间用来整理代码结构和逻辑。我把其中一部分面条截图给小伙伴，相顾无言，唯有泪千行。&lt;/p&gt;
&lt;p&gt;花了一整天把功能整理好，重写了方法，回头想了想，我大概又 Level Up 了。如果说美工和设计师，打字工和程序员有什么质的区别，可能很多人都会说，学习和思考。学什么，想什么，如何判断哪些东西是自己要学的，如何判断哪些东西是自己该想的，却鲜少有人提及。我也只是想站在设计师与程序员的夹缝地带聊一聊这些事。&lt;/p&gt;
    
    </summary>
    
    
      <category term="杂谈" scheme="http://hikarievo.me/tags/%E6%9D%82%E8%B0%88/"/>
    
  </entry>
  
  <entry>
    <title>【译】使用客户端查询托管响应式图片</title>
    <link href="http://hikarievo.me/2016/03/18/leaner-responsive-images-with-client-hints/"/>
    <id>http://hikarievo.me/2016/03/18/leaner-responsive-images-with-client-hints/</id>
    <published>2016-03-17T16:28:49.000Z</published>
    <updated>2016-03-17T17:18:53.470Z</updated>
    
    <content type="html">&lt;p&gt;很多人都对&lt;strong&gt;响应式图片&lt;/strong&gt;略有耳闻，至少也从经验者那里学到过一二。毋庸置疑，&lt;a href=&quot;https://www.smashingmagazine.com/2014/05/responsive-images-done-right-guide-picture-srcset/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;响应式图片&lt;/a&gt;标准是网络的伟大胜利。然而不少线报都表示响应式图片&lt;strong&gt;不怎么好看&lt;/strong&gt;。&lt;br&gt;好消息是我们能解决这个问题！不用向JavaScript扔去挑战，只要请服务器伸出援手。输入&lt;strong&gt;Client Hints（客户端提示）&lt;/strong&gt;，Google牵头的这项技术已经可以在浏览器（Chrome和Opera）上使用，而且非常好用。我们来看一下Client Hints是如何减少图像体积与冗长的响应式图片标记的。&lt;br&gt;&lt;a id=&quot;more&quot;&gt;&lt;/a&gt;&lt;br&gt;本文不会证明响应式图片所面临的挑战。很多人&lt;a href=&quot;http://www.scientiamobile.com/page/responsive-images-specification-real-world-scenarios&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;已经&lt;/a&gt;&lt;a href=&quot;http://codepen.io/Tigt/post/when-responsive-images-get-ugly&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;做了&lt;/a&gt;&lt;a href=&quot;https://dev.opera.com/articles/responsive-images/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;这些事&lt;/a&gt;了。相反，&lt;strong&gt;我们主要讨论如何解决这些问题&lt;/strong&gt;，借助一点服务器和浏览器新方式的帮助，请求具有特定属性的图像。虽然这项技术被称作“客户端&lt;em&gt;提示&lt;/em&gt;”，但这是很具体的。让我们来看一下吧！&lt;/p&gt;
&lt;figure&gt;&lt;img src=&quot;https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2016/01/rwd-images-opt-1.png&quot; alt=&quot;响应式图片&quot;&gt;&lt;figcaption&gt;古老的好问题：响应式图片。图片来自：&lt;a href=&quot;https://www.smashingmagazine.com/2014/05/responsive-images-done-right-guide-picture-srcset/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;Eric Portis&lt;/a&gt;.&lt;/figcaption&gt;&lt;br&gt;&lt;/figure&gt;

&lt;p&gt;##什么是客户端提示？&lt;br&gt;客户端提示是&lt;a href=&quot;https://youtu.be/X1F8GEiZf9o?t=122&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;Chrome 46&lt;/a&gt;和Opera 33开始支持的一项新特性。更多浏览器厂商也在跟进。这是&lt;a href=&quot;https://github.com/igrigorik/http-client-hints&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;由Google倡议&lt;/a&gt;（由Ilya Grigorik牵头主持），根据其进展声明，应该称之为“一样东西”【大意就是说这玩意儿不是标准、项目或者别的什么…SAD】。该倡议近日也被&lt;a href=&quot;https://tools.ietf.org/html/draft-ietf-httpbis-client-hints-00&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;HTTP工作组&lt;/a&gt;接受。&lt;br&gt;你可以把客户端提示当做浏览器与服务器交流布局信息时所缺失的环节。响应式图片通过标记语言定义每一个可能的图像尺寸断点、像素密度及格式。而客户端提示并非如此，&lt;strong&gt;它将当前设置追加到HTTP请求中去&lt;/strong&gt;，由服务器做出完美的选择，也就是我们熟知的&lt;a href=&quot;https://en.wikipedia.org/wiki/Content_negotiation&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;内容协商&lt;/a&gt;.&lt;br&gt;现在处理响应式图片的方式通常是根据接收设备的像素密度，设定不同的图像资源，优化得图像格式和视口尺寸。如果你通过设置断点和格式的方式处理这个问题，你的代码可能会长成这样：&lt;/p&gt;
&lt;p&gt;&lt;figure&gt;&lt;img src=&quot;https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2015/12/01-BradFrost-Twitter-opt.png&quot; alt=&quot;Brad Frost: I never want to make anything that even remotely resembles this&quot; title=&quot;Verbose 响应式图片&quot;&gt;&lt;figcaption&gt;使用响应式图片的语法的相对简单的案例也有点复杂。本段代码来自&lt;a href=&quot;http://alistapart.com/article/responsive-images-in-practice&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;A List Apart&lt;/a&gt;. (来自：&lt;a href=&quot;https://twitter.com/brad_frost/status/599676745176997889&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;Brad Frost&lt;/a&gt;）&lt;/figcaption&gt;&lt;br&gt;&lt;/figure&gt;&lt;br&gt;我觉得我们大都认同Brad的观点。&lt;br&gt;说句公道话，上面的例子确实包含太多不同需求的图片。让客户端提示独立解决还是不太可能。然而编写这样的代码是&lt;em&gt;不应该&lt;/em&gt;让开发者或者设计师&lt;a href=&quot;http://blog.cloudfour.com/responsive-images-101-part-9-image-breakpoints/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;耗费他们的时间&lt;/a&gt;的。&lt;strong&gt;我们需要自动化编译&lt;/strong&gt;。虽然服务器可以自动生成动态标记，但客户端提示可以让代码与图片资源解耦，这样我们便不必过分担心代码而对图片执行操作。&lt;/p&gt;
&lt;p&gt;##让服务器知道&lt;br&gt;想像一下，如果服务器知道像素密度，视口尺寸，还知道图像的实际大小和格式。这就是客户端提示所要做的事！支持客户端提示的浏览器&lt;strong&gt;在请求中添加了一些HTTP头信息&lt;/strong&gt;。&lt;a href=&quot;http://igrigorik.github.io/http-client-hints/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;最新的草案&lt;/a&gt;提到了这些：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;DPR&lt;/code&gt;&lt;br&gt;这表示“设备的像素比率”，屏幕上的物理像素与CSS像素的比值。&lt;/li&gt;
&lt;li&gt;&lt;code&gt;Viewport-Width&lt;/code&gt;&lt;br&gt;CSS像素单位的视口宽度（CSS像素是指用CSS单位描述的布局。在像素比（DPR）为2的设备上，100 CSS像素宽度是 200 设备像素（DP））。&lt;/li&gt;
&lt;li&gt;&lt;code&gt;Width&lt;/code&gt;&lt;br&gt;图像的实际像素真实宽度（像是响应式图片中的&lt;code&gt;w&lt;/code&gt;操作符）&lt;/li&gt;
&lt;li&gt;&lt;code&gt;Downlink&lt;/code&gt;&lt;br&gt;客户端的最大下载速率。&lt;/li&gt;
&lt;li&gt;&lt;code&gt;Save-Data&lt;/code&gt;&lt;br&gt;这个布尔值表示是否采取额外措施减少负载。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Chrome目前并不支持&lt;code&gt;Downlink&lt;/code&gt;和&lt;code&gt;Save-Data&lt;/code&gt;，不过你可以想到它们的目的。让我们来关注一下现在可用的提示。首先，我们要让浏览器发送这些提示。&lt;/p&gt;
&lt;p&gt;##在HTML代码中启用客户端提示&lt;/p&gt;
&lt;p&gt;&lt;figure&gt;&lt;img src=&quot;https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2015/12/02-clienthints101-preview-opt.png&quot; alt=&quot;The Client Hints flow: 1. Enable client hints. 2. Client hints are added. 3. Server selects or generates an image. 4. Server responds. 5. Image rendered.&quot; title=&quot;Client Hints flow&quot;&gt;&lt;/figure&gt;&lt;/p&gt;
&lt;p&gt;&lt;figcaption&gt;添加这段&lt;code&gt;&amp;amp;lt;meta&amp;amp;gt;&lt;/code&gt;标签，就可以使用客户端提示，并在发送请求的时候添加额外的HTTP头信息。 (&lt;a href=&quot;https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2015/12/02-clienthints101-opt.png&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;看大图&lt;/a&gt;)&lt;/figcaption&gt;&lt;br&gt;&lt;br&gt;你必须选择启用客户端提示。除非必要，否则就不应该向请求添加这些附加的数据。如果使用这些数据而添加它们，就添加了很多无效载荷。服务器也可以在HTML响应中添加头信息，列出自己所支持的提示：&lt;br&gt;&lt;figure class=&quot;highlight plain&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;gutter&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;1&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;Accept-CH: DPR, Width, Viewport-Width&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;&lt;/p&gt;
&lt;p&gt;如果不能添加HTTP头，也可以把这段meta标签添加到 &lt;code&gt;&amp;amp;lt;head&amp;amp;gt;&lt;/code&gt; 元素里：&lt;br&gt;&lt;figure class=&quot;highlight plain&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;gutter&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;1&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&amp;amp;lt;meta http-equiv=&amp;quot;Accept-CH&amp;quot; content=&amp;quot;DPR,Width,Viewport-Width&amp;quot;&amp;amp;gt;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;&lt;/p&gt;
&lt;p&gt;这就是我们所需的所有了。现在浏览器会把&lt;code&gt;DPR&lt;/code&gt;、&lt;code&gt;Width&lt;/code&gt;和&lt;code&gt;Viewport-Width&lt;/code&gt;头信息追加到&lt;em&gt;所有&lt;/em&gt;由HTML、CSS、JavaScript等产生的后续请求里（&lt;code&gt;Width&lt;/code&gt;是个例外，在实践中发现它只支持图像）。&lt;br&gt;除了图像，客户端提示貌似对&lt;strong&gt;基于视口尺寸或设备像素比设置断点的CSS文件也有效&lt;/strong&gt;。在CSS返回给浏览器之前就得知视口尺寸，服务器可以在发送响应之前把CSS文件中的无效块剥离出去。这是另一件事了，现在，我们来看看关于图片的例子。&lt;/p&gt;
&lt;p&gt;##我们的老朋友，&lt;code&gt;img&lt;/code&gt;&lt;br&gt;想想一下，我们有个页面，里面有下述的图像标签。让我们以200 CSS像素显示&lt;code&gt;flower.jpg&lt;/code&gt;。&lt;br&gt;&lt;figure class=&quot;highlight plain&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;gutter&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;1&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&amp;amp;lt;img src=&amp;quot;flower.jpg&amp;quot; width=&amp;quot;200&amp;quot;&amp;amp;gt;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;&lt;/p&gt;
&lt;p&gt;当客户端请求启用时，浏览器会发送下列请求到服务器：&lt;/p&gt;
&lt;p&gt;&lt;figure&gt;&lt;img src=&quot;https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2015/12/03-Headers1-preview-opt.png&quot; alt=&quot;http headers&quot; title=&quot;http headers.&quot;&gt;&lt;figcaption&gt;只要添加了对应的meta标签，浏览器就会在请求中附加&lt;code&gt;DPR&lt;/code&gt;和&lt;code&gt;Viewport-Width&lt;/code&gt;信息。 (&lt;a href=&quot;https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2015/12/03-Headers1-opt.png&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;看大图&lt;/a&gt;)&lt;/figcaption&gt;&lt;br&gt;&lt;/figure&gt;&lt;br&gt;浏览器“提示”服务器请求设备的像素比是2。额外奖励是我们也得到了视口的尺寸，因为浏览器在准备请求的时候已经知道了。因为 DPR 是 2 ，我们的我们的页面设计需要图像有 200px 宽，我们需要服务器提供一张实际像素为 400px 宽的图像（200px x 2）。&lt;br&gt;不过我们缺少显示尺寸的信息，即便&lt;code&gt;img&lt;/code&gt;标签说&lt;code&gt;width=&amp;quot;200&amp;quot;&lt;/code&gt;。&lt;a href=&quot;https://github.com/igrigorik/http-client-hints/blob/master/browser_implementation_considerations.md#width&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;规范解释&lt;/a&gt; &lt;code&gt;sizes&lt;/code&gt;属性已被设为&lt;code&gt;Width&lt;/code&gt;头中发送。在不久的将来，图像元素的&lt;code&gt;width&lt;/code&gt;属性可能也会被纳入算法，不过现在，我们仍只能坚持&lt;code&gt;sizes&lt;/code&gt;。&lt;code&gt;sizes&lt;/code&gt;属性描述图像的布局和显示尺寸。在一开始，想起它来大概不怎么吓人，就像老好&lt;code&gt;width&lt;/code&gt;属性或者CSS属性：&lt;br&gt;&lt;figure class=&quot;highlight plain&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;gutter&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;1&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&amp;amp;lt;img src=&amp;quot;flower.jpg&amp;quot; sizes=&amp;quot;200px&amp;quot;&amp;amp;gt;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;&lt;/p&gt;
&lt;p&gt;使用像素可能更容易“改造”现有代码，不过更推荐使用像是&lt;code&gt;vw&lt;/code&gt;这样的&lt;a href=&quot;http://www.w3.org/TR/css3-values/#relative-lengths&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;相对单位&lt;/a&gt;，可以使得页面更加“响应化”：&lt;br&gt;&lt;figure class=&quot;highlight plain&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;gutter&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;1&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&amp;amp;lt;img src=&amp;quot;flower.jpg&amp;quot; sizes=&amp;quot;25vw&amp;quot;&amp;amp;gt;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;&lt;/p&gt;
&lt;p&gt;现在，&lt;code&gt;flowers.jpg&lt;/code&gt;的请求会变成这样：&lt;/p&gt;
&lt;p&gt;&lt;figure&gt;&lt;img src=&quot;https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2016/01/04-Headers2-preview-opt.png&quot; alt=&quot;HTTP headers&quot; title=&quot;HTTP headers&quot;&gt;&lt;figcaption&gt;在meta元素中添加了&lt;code&gt;sizes&lt;/code&gt;属性后，请求中添加了&lt;code&gt;Width&lt;/code&gt;。 (&lt;a href=&quot;https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2016/01/04-Headers2-opt.png&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;看大图&lt;/a&gt;)&lt;/figcaption&gt;&lt;br&gt;&lt;/figure&gt;&lt;br&gt;浏览器根据视口现在的尺寸，以及设备的像素比计算图像的预期大小。在上例中，视口（&lt;code&gt;Viewport-Width&lt;/code&gt;）是 774px 宽。&lt;code&gt;&amp;amp;lt;img&amp;amp;gt;&lt;/code&gt;标签指定图像应该是设备视口的 25% 宽，也就是 193.5 CSS 像素。&lt;br&gt; 因为这是一个高分屏，像素比（&lt;code&gt;DPR&lt;/code&gt;）为 2，我们用 CSS 像素乘以像素比，所以实际像素是 387 px（&lt;code&gt;Width&lt;/code&gt;）。你可能在使用“正规”响应式图片标记代码中见过这种选择过程。不同之处在于，现在这些&lt;strong&gt;信息被追加在HTTP请求中&lt;/strong&gt;，而非从&lt;code&gt;srcset&lt;/code&gt;属性中选择图像资源。&lt;/p&gt;
&lt;p&gt;##鹅妹子嘤&lt;br&gt;刚才发生了什么？基本上来说，我们把我们冗长的响应式图片标签煮成了一些我们非常熟悉，但同样拥有响应功能的东西。有了像素比和宽度信息，服务器现在可以挑选，或者生成与请求图像合适尺寸的图像了。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;DPR&lt;/code&gt;关注于分辨率切换。我们不需要使用带有&lt;code&gt;x&lt;/code&gt;描述的&lt;code&gt;srcset&lt;/code&gt;代码了。&lt;br&gt;-&lt;code&gt;Width&lt;/code&gt;告诉服务器，浏览器所需的适合当前布局的图像的实际宽度（与视口有关）。&lt;br&gt;实际上，我们根本不需要&lt;code&gt;srcset&lt;/code&gt;啦。&lt;code&gt;sizes&lt;/code&gt;属性是我们的新英雄！浏览器基于&lt;code&gt;sizes&lt;/code&gt;的相对值，将其转换为物理像素所需的真实像素值。并且记住，当你希望在视口尺寸改变的时候，图像也展现不同尺寸，可以使用媒体状态（media conditions）：&lt;figure class=&quot;highlight plain&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;gutter&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;1&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&amp;amp;lt;img src=&amp;quot;flower.jpg&amp;quot; sizes=&amp;quot;(min-width: 30em) 100vw, 50vw&amp;quot;&amp;amp;gt;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;code&gt;Width&lt;/code&gt;头当然也会反映这点。更深入点探讨，Jason Grigsby&lt;a href=&quot;http://blog.cloudfour.com/responsive-images-101-part-5-sizes/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;在Cloud Four上&lt;/a&gt;撰写了一篇极佳的介绍&lt;code&gt;sizes&lt;/code&gt;的文章。&lt;br&gt;不过&lt;code&gt;type&lt;/code&gt;怎么办？响应式图像允许你定义不同的格式或MIME格式，只要使用&lt;code&gt;type&lt;/code&gt;属性就可以了：&lt;code&gt;type=&amp;quot;image/webp&amp;quot;&lt;/code&gt;&lt;br&gt;客户端提示可做不了这个，不过他的老大哥，&lt;code&gt;Accept&lt;/code&gt;头可以带上些有用的信息。&lt;br&gt;&lt;figure class=&quot;highlight plain&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;gutter&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;1&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;Accept: image/webp,image/*,*/*;q=0.8&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;&lt;/p&gt;
&lt;p&gt;这是来自Chrome的例子，足够告诉我们WebPage是首选了。其他浏览器可能只会说&lt;code&gt;*/*&lt;/code&gt;，意思就是“随便”。在这些例子中，你可以使用自己的规则，甚至更好，服务器可以实现更先进的设备智能化解决方案，来决定返回给客户端的最佳图片格式。&lt;/p&gt;
&lt;p&gt;##服务器端的浏览器提示&lt;br&gt;我们可以说，当我们使用了客户端提示，我们便把选择图像资源的响应能力从浏览器端移动到了服务器。也就是说，我们需要某些逻辑在服务器端实现客户端提示。&lt;br&gt;把服务器牵涉进来的好处是，我们不再需要从一串准备好的图像中选择一张最合适的，&lt;strong&gt;服务器可以动态生成最完美的图像资源&lt;/strong&gt;！在小规模内这还是有实现价值的，毕竟我们已经在HTTP头中拥有了我们所需的所有信息。&lt;br&gt;然而，如果这个任务有点吓人，或者性能更加重要，某些图像代理服务器已经支持客户端提示了。其中一个免费的服务器为&lt;a href=&quot;http://web.wurfl.io/#image-engine&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;ImageEngine&lt;/a&gt;。使用 ImageEngine 的话，我们要先为图像添加服务器前缀。&lt;br&gt;如果你的图像 &lt;code&gt;src&lt;/code&gt; 地址是 &lt;code&gt;http://example.com/image.jpg&lt;/code&gt;，那么我们要把 &lt;code&gt;src&lt;/code&gt; 改为 &lt;code&gt;http://[key].lite.imgeng.in/http://example.com/image.jpg&lt;/code&gt;。&lt;code&gt;[key]&lt;/code&gt;是你在注册后获得的个人识别码。只要你页面中有meta标签，并且在图像标签中添加了&lt;code&gt;sizes&lt;/code&gt;属性，我们就可以了。看一下使用cURL的响应，我们可以了解到服务器是如何响应的：&lt;br&gt;&lt;figure class=&quot;highlight plain&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;gutter&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;1&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;2&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;3&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;$ curl -I http://try.imgeng.in/http://web.wurfl.io/assets/sunsetbeach.jpg -H &amp;quot;DPR: 2&amp;quot; -H &amp;quot;Width: 150&amp;quot; -H &amp;quot;Viewport-Width: 800&amp;quot;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;HTTP/1.1 200 OK Content-Type: image/jpeg Vary: Width Content-DPR: 2 …&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;&lt;/p&gt;
&lt;p&gt;这个请求的&lt;code&gt;DPR&lt;/code&gt;是 2， &lt;code&gt;Width&lt;/code&gt; 是 150px，&lt;code&gt;Viewport-Width&lt;/code&gt;是800。于是服务器返回了 &lt;code&gt;Content-DPR&lt;/code&gt; 头，目的是&lt;a href=&quot;http://igrigorik.github.io/http-client-hints/#confirming-selected-dpr&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;向浏览器确认&lt;/a&gt; 返回图像的像素比，以便浏览器可以正确适配页面。&lt;br&gt;在上面的例子中，&lt;code&gt;Content-DPR&lt;/code&gt;永远与&lt;code&gt;DPR&lt;/code&gt; 的返回头相同，因为ImageEngine将输入的图像缩放到与其 &lt;code&gt;Width&lt;/code&gt;相等。也就是说，即使没有设置&lt;code&gt;Width&lt;/code&gt; ，ImageEngine也会回到&lt;code&gt;Viewport-Width&lt;/code&gt;并从从WURFL（设备数据库）中检索尺寸数据。&lt;br&gt;如果你要自己配置服务器，并想模仿浏览器行为，从一系列预先生成好的图像资源中选择合适的，那么 &lt;code&gt;Content-DPR&lt;/code&gt;头的值可能就和客户端的 &lt;code&gt;DPR&lt;/code&gt; 提示不同了。浏览器会使用&lt;code&gt;Content-DPR&lt;/code&gt; 缩放图像图像到其显示尺寸。&lt;br&gt;另外值得一提的是 &lt;code&gt;Vary&lt;/code&gt; 头。这个头信息是为了告诉客户端（浏览器或代理） 据不同 &lt;code&gt;Width&lt;/code&gt; 头的值，&lt;strong&gt;从这个URI响应不同的内容&lt;/strong&gt;。这使得网络代理和内容分发网络更好地缓存图像，至少好过基于&lt;code&gt;User-Agent&lt;/code&gt;缓存。&lt;/p&gt;
&lt;p&gt;##不支持的浏览器&lt;br&gt;当你开始支持客户端提示的时候，你需要知道并不是所有浏览器都支持这个特性。在不支持客户端提示的浏览器上，上面最后一个&lt;code&gt;&amp;amp;lt;img&amp;amp;gt;&lt;/code&gt;标签可能会把整个页面搞得一团乱。所以，我们要怎么办？&lt;br&gt;考虑勇哥&lt;a href=&quot;https://remysharp.com/2010/10/08/what-is-a-polyfill&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;JavaScript polyfill&lt;/a&gt;吧？在本例中，我们必须依靠cookies，没有单独的HTTP头。cookies必须包含缓存键，这就导致内容分发网络和缓存代理会出现缓存污染的问题。此外更重要的是，浏览器的 &lt;a href=&quot;http://www.stevesouders.com/blog/2013/04/26/i/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;预加载程序&lt;/a&gt;对cookies的值一无所知。&lt;br&gt;在对客户端提示达到临界规模之前，最安全的处理办法是将&lt;strong&gt;提示与明确但相对的宽高结合&lt;/strong&gt;，以确定布局不会混乱。如果浏览器不发送客户端提示，但图像浏览器需要它，你需要布局来处理图像服务器默认条件下发来的超大图像。此外，为了减少供应过大图像到不支持浏览器的风险，推荐使用图像优化服务。ImageEngine在处理移动设备上相当好，它真的很好用（我就是偏爱它！）。就算移动设备不支持客户端提示，ImageEngine也绝不会提供超过设备屏幕宽度的图像。&lt;/p&gt;
&lt;p&gt;##性能&lt;br&gt;除了自动化方面的考量，推进客户端提示的另一个动机是图像性能。做一个相对公平的测试案例比较困难，但是我把基于客户端提示的图像请求性能与“常规”响应式图片请求放在一起，做了一个&lt;a href=&quot;http://wurfl.github.io/smdemo.html&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;小演示&lt;/a&gt;，并包含两种情形。下表是数据传输量和不同视口下的实际图像大小。选定的图像断点和视口大小是任意的。&lt;/p&gt;
&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th style=&quot;text-align:center&quot;&gt;视口宽度&lt;/th&gt;
&lt;th style=&quot;text-align:center&quot;&gt;KBytes (srcset)&lt;/th&gt;
&lt;th style=&quot;text-align:center&quot;&gt;实际宽度 (像素, srcset)&lt;/th&gt;
&lt;th style=&quot;text-align:center&quot;&gt;KBytes (客户端提示)&lt;/th&gt;
&lt;th style=&quot;text-align:center&quot;&gt;实际宽度 (像素, 客户端提示)&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td style=&quot;text-align:center&quot;&gt;320&lt;/td&gt;
&lt;td style=&quot;text-align:center&quot;&gt;39.6&lt;/td&gt;
&lt;td style=&quot;text-align:center&quot;&gt;480&lt;/td&gt;
&lt;td style=&quot;text-align:center&quot;&gt;16.1&lt;/td&gt;
&lt;td style=&quot;text-align:center&quot;&gt;288&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style=&quot;text-align:center&quot;&gt;480&lt;/td&gt;
&lt;td style=&quot;text-align:center&quot;&gt;39.6&lt;/td&gt;
&lt;td style=&quot;text-align:center&quot;&gt;480&lt;/td&gt;
&lt;td style=&quot;text-align:center&quot;&gt;28.6&lt;/td&gt;
&lt;td style=&quot;text-align:center&quot;&gt;432&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style=&quot;text-align:center&quot;&gt;800&lt;/td&gt;
&lt;td style=&quot;text-align:center&quot;&gt;81.7&lt;/td&gt;
&lt;td style=&quot;text-align:center&quot;&gt;768&lt;/td&gt;
&lt;td style=&quot;text-align:center&quot;&gt;63&lt;/td&gt;
&lt;td style=&quot;text-align:center&quot;&gt;720&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style=&quot;text-align:center&quot;&gt;1100&lt;/td&gt;
&lt;td style=&quot;text-align:center&quot;&gt;138&lt;/td&gt;
&lt;td style=&quot;text-align:center&quot;&gt;1024&lt;/td&gt;
&lt;td style=&quot;text-align:center&quot;&gt;113&lt;/td&gt;
&lt;td style=&quot;text-align:center&quot;&gt;990&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style=&quot;text-align:center&quot;&gt;1400&lt;/td&gt;
&lt;td style=&quot;text-align:center&quot;&gt;138&lt;/td&gt;
&lt;td style=&quot;text-align:center&quot;&gt;1024&lt;/td&gt;
&lt;td style=&quot;text-align:center&quot;&gt;186&lt;/td&gt;
&lt;td style=&quot;text-align:center&quot;&gt;1260&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;p&gt;预选图片断点跨越了不同视口尺寸，而客户端提示以及图像服务器能够调整图像大小，解决了视口大小的连续性。&lt;strong&gt;使用客户端提示，我们可以做到手术级别的精密度&lt;/strong&gt;。平均来说，客户端提示让服务器减少了19%的数据。如果我们去掉1400px视口，并向其中提供过小的图像，那么数据量可以减少32%，实实在在的。&lt;/p&gt;
&lt;p&gt;&lt;figure&gt;&lt;img src=&quot;https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2015/12/05-wptsmdemox-preview-opt.png&quot; alt=&quot;waterfall&quot; title=&quot;waterfall&quot;&gt;&lt;figcaption&gt;完整的测试数据可以在&lt;a href=&quot;http://www.webpagetest.org/result/151117_DY_HEF/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;WebPagetest上查看&lt;/a&gt; (&lt;a href=&quot;https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2015/12/05-wptsmdemox-opt.png&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;看大图&lt;/a&gt;)&lt;/figcaption&gt;&lt;br&gt;&lt;/figure&gt;&lt;br&gt;上面图表中的数据样本数量太小，无法得出任何结论，但它很好地说明了客户端提示的目的。无需惊讶。值得注意的是，虽然为外部主机域名&lt;code&gt;try.imgeng.in&lt;/code&gt;使用了 &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/HTTP/Controlling_DNS_prefetching&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;DNS 预获取（DNS prefetching）&lt;/a&gt;。参考上面的表格，下载时间仍旧符合预期。客户端提示如其所宣称的那样性能良好。&lt;/p&gt;
&lt;p&gt;##（几乎）为黄金时间做好准备&lt;br&gt;响应式图片 (使用&lt;code&gt;srcset&lt;/code&gt;和&lt;code&gt;sizes&lt;/code&gt;的&lt;code&gt;&amp;amp;lt;img&amp;amp;gt;&lt;/code&gt;元素）只允许浏览器从图像资源列表中选择最接近的匹配，而客户端提示允许服务器提供为浏览器量身打造的图像，这在大多数情况下意味着&lt;strong&gt;更少的数据量和更好的图片质量&lt;/strong&gt;。如果你需要在服务器端部署支持，你确实需要编写一些程序。好消息是，一些内容分发网络和网络服务器已经支持这项特性了。&lt;br&gt;客户端提示前途一片光明，添加用户连接和指令以减少数据传输的特性也&lt;a href=&quot;http://igrigorik.github.io/http-client-hints/#the-downlink-client-hint&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;正在制定&lt;/a&gt;。有了这些信息，服务器可以增加图像压缩率或通过其他方式减少图像体积。&lt;br&gt;作为开发者，&lt;strong&gt;我们没有理由不开始立即探索客户端提示&lt;/strong&gt;。最核心的好处是更简洁且更易维护的响应式图像标签，更少的图像数据传输以及最终，更幸福的用户。你只要遵从这几个步骤：&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;向&lt;code&gt;head&lt;/code&gt;元素中添加meta标签。&lt;/li&gt;
&lt;li&gt;把&lt;code&gt;sizes&lt;/code&gt; 属性放进你的图像标签。&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;然后或制作，或挑选你的图像服务器。我前面已经提到过免费的&lt;a href=&quot;https://web.wurfl.io/#image-engine&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;ImageEngine&lt;/a&gt;优化服务支持客户端提示。最好的找到支持客户端提示的服务器的方法是保持关注，并&lt;a href=&quot;https://www.google.com/webhp?q=image+optimizing+client+hints&amp;amp;gws_rd=cr&amp;amp;ei=hWtUVr3FGIWlsgHzuo_wAg#&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;在Google上搜索&lt;/a&gt; （废话！），因为这是一件新事物，在我们发声之时就在有更多供应商宣布支持。&lt;br&gt;如果你想自己实现对客户端提示的支持，《&lt;a href=&quot;https://www.smashingmagazine.com/2015/06/efficient-image-resizing-with-imagemagick/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;Efficient Image Resizing With ImageMagick&lt;/a&gt;》这篇文章可以作为一个良好的开始。另外，开源图像服务&lt;a href=&quot;https://github.com/thumbor/thumbor/issues/549&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;Thumbor也在考虑客户端提示&lt;/a&gt;。&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;VIA &lt;a href=&quot;https://www.smashingmagazine.com/2016/01/leaner-responsive-images-client-hints/#mind-blown&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;Smash Magazine&lt;/a&gt;&lt;br&gt;也发表在&lt;a href=&quot;http://www.epubit.com.cn/article/385&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;异步社区&lt;/a&gt;&lt;/p&gt;
</content>
    
    <summary type="html">
    
      &lt;p&gt;很多人都对&lt;strong&gt;响应式图片&lt;/strong&gt;略有耳闻，至少也从经验者那里学到过一二。毋庸置疑，&lt;a href=&quot;https://www.smashingmagazine.com/2014/05/responsive-images-done-right-guide-picture-srcset/&quot;&gt;响应式图片&lt;/a&gt;标准是网络的伟大胜利。然而不少线报都表示响应式图片&lt;strong&gt;不怎么好看&lt;/strong&gt;。&lt;br&gt;好消息是我们能解决这个问题！不用向JavaScript扔去挑战，只要请服务器伸出援手。输入&lt;strong&gt;Client Hints（客户端提示）&lt;/strong&gt;，Google牵头的这项技术已经可以在浏览器（Chrome和Opera）上使用，而且非常好用。我们来看一下Client Hints是如何减少图像体积与冗长的响应式图片标记的。&lt;br&gt;
    
    </summary>
    
    
      <category term="工具" scheme="http://hikarievo.me/tags/%E5%B7%A5%E5%85%B7/"/>
    
      <category term="HTML" scheme="http://hikarievo.me/tags/HTML/"/>
    
      <category term="翻译" scheme="http://hikarievo.me/tags/%E7%BF%BB%E8%AF%91/"/>
    
  </entry>
  
  <entry>
    <title>在线创建美图表、流程图</title>
    <link href="http://hikarievo.me/2015/10/11/online-diagram-and-flow-chart/"/>
    <id>http://hikarievo.me/2015/10/11/online-diagram-and-flow-chart/</id>
    <published>2015-10-11T02:41:04.000Z</published>
    <updated>2015-10-11T04:12:34.462Z</updated>
    
    <content type="html">&lt;p&gt;之前写&lt;a href=&quot;/2015/06/14/i-dont-know-cheese/&quot;&gt;醍醐灌奶酪&lt;/a&gt;的时候，做了一张很大的图。可以说，当时写文查资料只占那篇文全部精力的一半，剩下一半则是作图 &amp;gt;&amp;lt;。&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;http://7qnahw.com1.z0.glb.clouddn.com/screenshot/milk_products.png&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;&lt;img src=&quot;http://7qnahw.com1.z0.glb.clouddn.com/screenshot/milk_products.png&quot; title=&quot;点我看大&quot; style=&quot;width: 100%;max-width:100%&quot;&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;在我记忆里这种图用 Axure 或者 AI 也不是不能画，但是好死不死我电脑里并没有这两个软件也并不想装。我相信万能的互联网会给我答案！经过一番筛选，我也成功找到了心仪的它 XD，它就是——&lt;strong&gt;&lt;a href=&quot;https://www.gliffy.com/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;Gliffy&lt;/a&gt;&lt;/strong&gt;。&lt;br&gt;&lt;a id=&quot;more&quot;&gt;&lt;/a&gt;&lt;br&gt;Gliffy是可以在线创建流程图、UML图、线框图、BPNM、组织架构图、网站地图等各式图表的工具型网站。可以同步Google、微软以及著名不存在网站帐号，也可以使用邮箱注册。免费用户有30天无限制试用期，试用期过后，部分组件会被锁定（主要是UML和线框图的部分），不能保存私有图表，并且保存图表限制为5张。对于大部分普通用户来说是足够了。&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;http://7qnahw.com1.z0.glb.clouddn.com/screenshot/Diagram%20Templates%20for%20Business.png&quot; alt=&quot;&quot; title=&quot;可以创建的图表种类丰富多样，连楼层平面图都可以（扶额）&quot;&gt;&lt;/p&gt;
&lt;p&gt;可以在首页直接点START DRAWING或者先登录帐号都可以开始绘图，登录了帐号才能保存图表哦~新建图表后的界面是这样的&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://www.gliffy.com/user-manual/images/DrawingStageHTML.png&quot; alt=&quot;&quot;&gt;&lt;/p&gt;
&lt;p&gt;最上面两行分别是&lt;strong&gt;菜单栏&lt;/strong&gt;和&lt;strong&gt;工具栏&lt;/strong&gt;，左边是&lt;strong&gt;组件库&lt;/strong&gt;，右边最大的空白区域就是&lt;strong&gt;编辑区&lt;/strong&gt;了。&lt;/p&gt;
&lt;p&gt;画图的方式也非常简单…就是把左边组件库的组件，拖~~~到右边来就可以了。选中组件的时候，这个组件右边会出现&lt;img src=&quot;https://www.gliffy.com/user-manual/images/PropertiesButtonHTML.png&quot; style=&quot;display:inline-block;margin:0 5px;&quot;&gt;这样的按钮，点开左边的按钮之后就是组件属性设置：&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;&lt;img src=&quot;https://www.gliffy.com/user-manual/images/PropOnline.png&quot; alt=&quot;&quot;&gt;&lt;br&gt;应该还挺容易看明白的吧…第一排从左到右分别是填充颜色，边框（线条）颜色，边框（线条）粗细，边框（线条）种类，渐变（它的渐变是自动的，不能手工调整），投影（同样不能手工调整），透明度。下面则分别是坐标尺寸旋转角度以及锁定功能。&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;同时选中多个组件的时候，设置工具就会变样，打开之后则是多了一排对齐工具，熟悉任意一种绘图工具的同学应该都会熟悉这些图标的意思，不明的话点点看就知道了。&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://www.gliffy.com/user-manual/images/Evenly1.png&quot; alt=&quot;&quot;&gt;&lt;/p&gt;
&lt;p&gt;属性设置右边的A字按钮，顾名思义就是修改文字设置的。只要双击任何一个组件，就可以在上面添加文字（如果是连接线，则可以添加多段文字，你在哪双击的，就会在哪添加，添加好的文字位置也可以拖动修改），虽然不能设置文字边距这些，但是文字位置、对齐方式这些还是可以修改的。另外它虽然提供了字体字号的修改工具，但是这个工具对中文的支持性…很一般，默认导出的图片只能是宋体（windows），当然你也可以选择导出svg然后再去改代码或者进AI编辑。&lt;/p&gt;
&lt;p&gt;而说到连接线，则要使用 Gliffy 提供的连接工具了：&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;&lt;img src=&quot;https://www.gliffy.com/user-manual/images/Toolbar4441.png&quot; alt=&quot;&quot;&gt;&lt;br&gt;从左到右分别是 1.撤销/重做；2.组合/解散组合；3.置于最前/置于最后；4.超链接工具；5.弹出框工具；6.格式刷；7.文字；8.形状；9.连接/直线；10.选择；11.移动画布；12.缩放；13.放大/缩小;14.自动辅助线；15.网格；16.对齐网格；17.主题；18.图层。&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;选择连接工具(9)，组件上就会出现很多小十字，鼠标挪过去之后，对应的十字就会变成绿圈，点一下并拖动到想要连接的另外一个组件上去就可以了。之后要记得选回到选择(10)状态，单击连接线，就会出现&lt;img src=&quot;https://www.gliffy.com/user-manual/images/PropertiesButtonHTML2.png&quot; style=&quot;display:inline-block;margin:0 5px;&quot;&gt;这样的编辑按钮，同样点左边的，就会出现属性设置的窗口。&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;&lt;img src=&quot;https://www.gliffy.com/user-manual/images/LinePropertiesMenu.png&quot; alt=&quot;&quot;&gt;&lt;br&gt;前两个分别是初始箭头和结束箭头的样式，最后一个type则是线型，有直线、折线、圆角折线、曲线四种选择。&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;最后我要盛赞它的主题…在工具栏上点开主题按钮(17)之后，界面右边就会出现默认主题的选择&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;&lt;img src=&quot;https://www.gliffy.com/user-manual/images/ThemesBox3.png&quot; alt=&quot;&quot;&gt;&lt;br&gt;鼠标悬停就可以查看样式，点一下就可以应用，非常方便，重点是，都还挺好看的。&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;全部搞定之后，就可以导出啦。格式有PNG、JPG、SVG和 Gliffy 可选。PNG并不是透明背景的这一点不是特别好…当然导出svg也完全没问题。&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;&lt;img src=&quot;https://www.gliffy.com/user-manual/images/OnlineExport.png&quot; alt=&quot;&quot;&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;PS：除了我上述这些，Gliffy 还带有表格功能、图层管理、插入图片、直接打印等等其他功能，因为我没用过，就不多说了 XDD 更详细的功能说明可以参考他们的&lt;a href=&quot;https://www.gliffy.com/user-manual/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;使用说明&lt;/a&gt;，虽然都是英文的，但是配图很多不怕不懂~&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;当时为了货比三家，也找了很多其他的在线工具，去掉使用 flash 的网站之后…就没剩几个了。这里比较推荐使用的是&lt;a href=&quot;https://drive.draw.io/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;Draw.io&lt;/a&gt;，优点是完全免费，缺点是需要自备梯子以及主题不好看 =3=。另外如果只是结构图或者脑暴图，也可以选择各种脑图工具，比如&lt;a href=&quot;http://naotu.baidu.com/home&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;百度脑图&lt;/a&gt;，优点当然是操作简单，缺点也是由此而引发的自定性差。&lt;/p&gt;
&lt;p&gt;BTW，请不要在网络上保存涉及公司机密的文件，你懂的。&lt;/p&gt;
</content>
    
    <summary type="html">
    
      &lt;p&gt;之前写&lt;a href=&quot;/2015/06/14/i-dont-know-cheese/&quot;&gt;醍醐灌奶酪&lt;/a&gt;的时候，做了一张很大的图。可以说，当时写文查资料只占那篇文全部精力的一半，剩下一半则是作图 &amp;gt;&amp;lt;。&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;http://7qnahw.com1.z0.glb.clouddn.com/screenshot/milk_products.png&quot;&gt;&lt;img src=&quot;http://7qnahw.com1.z0.glb.clouddn.com/screenshot/milk_products.png&quot; title=&quot;点我看大&quot; style=&quot;width: 100%;max-width:100%&quot;&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;在我记忆里这种图用 Axure 或者 AI 也不是不能画，但是好死不死我电脑里并没有这两个软件也并不想装。我相信万能的互联网会给我答案！经过一番筛选，我也成功找到了心仪的它 XD，它就是——&lt;strong&gt;&lt;a href=&quot;https://www.gliffy.com/&quot;&gt;Gliffy&lt;/a&gt;&lt;/strong&gt;。&lt;br&gt;
    
    </summary>
    
    
      <category term="设计" scheme="http://hikarievo.me/tags/%E8%AE%BE%E8%AE%A1/"/>
    
      <category term="工具" scheme="http://hikarievo.me/tags/%E5%B7%A5%E5%85%B7/"/>
    
      <category term="推荐" scheme="http://hikarievo.me/tags/%E6%8E%A8%E8%8D%90/"/>
    
  </entry>
  
  <entry>
    <title>来一起玩定向吧 &gt;&lt;</title>
    <link href="http://hikarievo.me/2015/09/03/lets-orienteering/"/>
    <id>http://hikarievo.me/2015/09/03/lets-orienteering/</id>
    <published>2015-09-03T04:17:06.000Z</published>
    <updated>2015-09-03T05:13:18.687Z</updated>
    
    <content type="html">&lt;p&gt;7月底的时候去了一趟瑞典，参加了传说中的五日赛。早在第一次听说全世界最大的定向越野比赛的时候，就心驰而神往，之后每年都念叨着想要去，今年终于算是得偿所愿（下面这个是2016年五日赛的宣传视频）&lt;/p&gt;
&lt;embed src=&quot;http://player.youku.com/player.php/sid/XMTMxMDA3MzU2MA==/v.swf&quot; allowfullscreen=&quot;true&quot; quality=&quot;high&quot; width=&quot;480&quot; height=&quot;400&quot; align=&quot;middle&quot; allowscriptaccess=&quot;always&quot; type=&quot;application/x-shockwave-flash&quot;&gt;

&lt;a id=&quot;more&quot;&gt;&lt;/a&gt;
&lt;p&gt;定向是一项最接近大自然的运动，像我这种站上跑道就想去死的人，在森林里狂奔一个小时也不会觉得怎样（毕竟空气也好景色也好）。而且定向脱胎自军事运动，对体能和脑力的要求也是其他运动所不能比的。总之这种乐趣，不亲自上场来玩一遭，是很难体会的 &amp;gt;&amp;lt;&lt;/p&gt;
&lt;p&gt;这次去玩回来，根据参赛的经历做了一个 PPT……主要是针对如何参加五日赛以及赛事相关的注意事项，定向的基本规则什么的就没有赘述了……&lt;/p&gt;
&lt;object width=&quot;100%&quot; height=&quot;600&quot; align=&quot;middle&quot; id=&quot;reader&quot; codebase=&quot;http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0&quot; classid=&quot;clsid:d27cdb6e-ae6d-11cf-96b8-444553540000&quot;&gt;&lt;param value=&quot;window&quot; name=&quot;wmode&quot;&gt;&lt;param value=&quot;true&quot; name=&quot;allowfullscreen&quot;&gt;&lt;param name=&quot;allowscriptaccess&quot; value=&quot;always&quot;&gt;&lt;param value=&quot;http://wenku.baidu.com/static/flash/apireader.swf?docurl=http://wenku.baidu.com/play&amp;amp;docid=cb7471568bd63186bdebbc40&amp;amp;title=%E7%91%9E%E5%85%B8%E4%BA%94%E6%97%A5%E8%B5%9B%E5%85%A8%E6%94%BB%E7%95%A5&amp;amp;doctype=ppt&amp;amp;fpn=5&amp;amp;npn=5&amp;amp;readertype=external&amp;catal=0&amp;amp;cdnurl=http://txt.wenku.baidu.com/play&quot; name=&quot;movie&quot;&gt;&lt;embed width=&quot;100%&quot; align=&quot;middle&quot; height=&quot;600&quot; pluginspage=&quot;http://www.macromedia.com/go/getflashplayer&quot; type=&quot;application/x-shockwave-flash&quot; name=&quot;reader&quot; src=&quot;http://wenku.baidu.com/static/flash/apireader.swf?docurl=http://wenku.baidu.com/play&amp;amp;docid=cb7471568bd63186bdebbc40&amp;amp;title=%E7%91%9E%E5%85%B8%E4%BA%94%E6%97%A5%E8%B5%9B%E5%85%A8%E6%94%BB%E7%95%A5&amp;amp;doctype=ppt&amp;amp;fpn=5&amp;amp;npn=5&amp;amp;readertype=external&amp;catal=0&amp;amp;cdnurl=http://txt.wenku.baidu.com/play&quot; wmode=&quot;window&quot; allowscriptaccess=&quot;always&quot; bgcolor=&quot;#FFFFFF&quot; ver=&quot;9.0.0&quot; allowfullscreen=&quot;true&quot;&gt;&lt;/object&gt;

&lt;p&gt;更多的内容我写在 ppt 备注页里了，有兴趣的话请下载下来看吧（总之还是不建议下ppt版本…）：&lt;br&gt;&lt;a href=&quot;http://1drv.ms/1NOBxYW&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;OneDrive（PPTX）&lt;/a&gt; &lt;a href=&quot;http://wenku.baidu.com/view/cb7471568bd63186bdebbc40&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;百度文库（PPT）&lt;/a&gt; &lt;a href=&quot;http://pan.baidu.com/s/1gdKvMTH&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;百度网盘（ppt 和 pptx 还有我们上次比赛的地图）&lt;/a&gt;&lt;/p&gt;
</content>
    
    <summary type="html">
    
      &lt;p&gt;7月底的时候去了一趟瑞典，参加了传说中的五日赛。早在第一次听说全世界最大的定向越野比赛的时候，就心驰而神往，之后每年都念叨着想要去，今年终于算是得偿所愿（下面这个是2016年五日赛的宣传视频）&lt;/p&gt;
&lt;embed src=&quot;http://player.youku.com/player.php/sid/XMTMxMDA3MzU2MA==/v.swf&quot; allowFullScreen=&quot;true&quot; quality=&quot;high&quot; width=&quot;480&quot; height=&quot;400&quot; align=&quot;middle&quot; allowScriptAccess=&quot;always&quot; type=&quot;application/x-shockwave-flash&quot;&gt;&lt;/embed&gt;
    
    </summary>
    
    
      <category term="杂谈" scheme="http://hikarievo.me/tags/%E6%9D%82%E8%B0%88/"/>
    
  </entry>
  
  <entry>
    <title>弹弹弹，弹出好多框框</title>
    <link href="http://hikarievo.me/2015/08/26/which-is-my-dialog/"/>
    <id>http://hikarievo.me/2015/08/26/which-is-my-dialog/</id>
    <published>2015-08-26T11:05:43.000Z</published>
    <updated>2016-06-04T05:49:16.138Z</updated>
    
    <content type="html">&lt;p&gt;我们有一个设计师吃货群，聚集了两岸三地海内外的华人吃货话唠设计师，设计师和吃货都是关键词。因为人员背景复杂，经常会出现常用名词都互相不了解的情况，曾经因为“意面”一个词热烈讨论了一个多小时，大抵结论就是台湾的意面并不像内地这样特指意大利面（当然也不是Pasta），是另外一种做法的鸡蛋面（虽然他们当地人也一直说不清2333）。光中文就搞成这样，英文就更不用说，之前群里聊起来 dialog 和 modal 到底哪里不同要怎么用的问题…虽然我觉得用弹出窗口、对话框、气泡提示之类的中文可能更好理解，但是群里很多人表示还是讲英语省得搞不清（虽然我觉得在这里中文反而讲得清…），所以我过来理理清~&lt;br&gt;&lt;a id=&quot;more&quot;&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h2 id=&quot;Dialog（对话框）&quot;&gt;&lt;a href=&quot;#Dialog（对话框）&quot; class=&quot;headerlink&quot; title=&quot;Dialog（对话框）&quot;&gt;&lt;/a&gt;Dialog（对话框）&lt;/h2&gt;&lt;p&gt;很有年头的老大哥，windows最早的弹出式消息提示窗口就被称为“对话框”，现在 jQuery UI 还有 Android 里都还保留这个组件名称，在不同的文档里，对话框都有不同的功能定义（看了&lt;a href=&quot;https://jqueryui.com/dialog/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;jQuery UI&lt;/a&gt;、，&lt;a href=&quot;http://developer.android.com/guide/topics/ui/dialogs.html&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;Android文档&lt;/a&gt;还有&lt;a href=&quot;https://msdn.microsoft.com/en-us/library/windows/desktop/ms644994.aspx&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;MSDN&lt;/a&gt;&lt;a href=&quot;https://msdn.microsoft.com/zh-cn/library/aa969773.aspx&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;文档&lt;/a&gt;就给我出了4种说法…）。综合而论，对话框的主要的应用范畴是展示信息、请求确认或请求输入，也因此被分为无模式（modeless）和有模式（modal）两种，无模式就是所谓的弹出消息框，有模式则是指的带有交互操作、情景的，也就是所谓的模态框了。&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;http://7qnahw.com1.z0.glb.clouddn.com/popbox/dialogs.png&quot; alt=&quot;dialog&quot;&gt;&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;上图从左到右分别来自&lt;a href=&quot;https://jqueryui.com/dialog/#default&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;jQueryUI&lt;/a&gt;、&lt;a href=&quot;http://developer.android.com/guide/topics/ui/dialogs.html&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;android文档&lt;/a&gt;、&lt;a href=&quot;https://en.wikipedia.org/wiki/Dialog_box&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;wikipedia&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;对话框的显示特点是非全屏可乱拖。这玩意儿会打断用户当前的操作进程，虽然通常用作重要确认使用，但是很多用户已经学会了习惯性忽略 ╮(╯_╰)╭ 这样不但起不到应有的效果，还有可能导致无法避免的危险操作（不过话又说回来，如果想要避免危险操作导致的风险，打断用户可能是最有效的方式？（配合声光电闪瞎眼的警告））。当然这种对话框也分为两种，一种是在完成当前交互之前禁止其他操作（这种被称为阻塞式，比如电脑关机），还有一种则不做限制（这种则被称为非阻塞式，比如以前windows的崩溃警告，不点确定还可以继续使用，点了就强制结束进程神马的！！）。&lt;/p&gt;
&lt;p&gt;在HTML5.1的草案中也提出了新的 &lt;a href=&quot;http://www.w3.org/html/wg/drafts/html/master/semantics.html#the-dialog-element&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;Dialog 元素&lt;/a&gt;及其对应的一系列方法，当然现在支持这个元素的浏览器还很少，所以也就是拭目以待一下就OK啦。人家老大哥就是老大哥，说白了接下来讲的几位根本都是他儿子（甚至孙子）而已（…&lt;/p&gt;
&lt;h2 id=&quot;Modal（模态框）&quot;&gt;&lt;a href=&quot;#Modal（模态框）&quot; class=&quot;headerlink&quot; title=&quot;Modal（模态框）&quot;&gt;&lt;/a&gt;Modal（模态框）&lt;/h2&gt;&lt;p&gt;我一直觉得把这玩意儿单独拿出来说的始作俑者是 bootstrap，结果顺着 wiki 的历史记录往回扒拉，发现这玩意儿的源头还挺早的（至少能追溯到07年），不管怎么说，这玩意儿本质还是，有模式的对话框。除了 Bootstrap 和一大票 UI Kit，iOS 也是 modal 的使用者（嗯哼哼）。&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;http://7qnahw.com1.z0.glb.clouddn.com/popbox/modals.png&quot; alt=&quot;modal&quot;&gt;&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;上图从左到右分别来自&lt;a href=&quot;http://v3.bootcss.com/javascript/#modals&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;Bootstrap&lt;/a&gt;、&lt;a href=&quot;http://materializecss.com/modals.html&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;materialize&lt;/a&gt;、&lt;a href=&quot;https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/Modal.html&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;iOS 人机交互文档&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;modal 的显示比较有特点，通常都会配有一张半透明遮罩（在&lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/CSS/::backdrop&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;MDN&lt;/a&gt;中就提到这样一个伪元素——&lt;code&gt;::backdrop&lt;/code&gt;，不过支持性不好而且使用环境受限所以暂不要考虑使用），然后弹出一个对话框（…），并附带有一些交互操作的组件，原界面下的所有 UI 组件都无法点击，必须完成当前模态框中的交互操作（也许只是一个确定或者取消）才可以回到原来的操作进程中。&lt;/p&gt;
&lt;h2 id=&quot;Pop-up（弹出气泡）&quot;&gt;&lt;a href=&quot;#Pop-up（弹出气泡）&quot; class=&quot;headerlink&quot; title=&quot;Pop-up（弹出气泡）&quot;&gt;&lt;/a&gt;Pop-up（弹出气泡）&lt;/h2&gt;&lt;p&gt;pop-up的原意是弹出，在早年间打开页面噼里啪啦铺面而来胡乱弹的烦人新窗口都可以叫 Pop-up，现在大部分浏览器都禁止弹出新窗口或对其有所限制，传统意义上的 Pop-up 已经不多见了（如果你硬要把所有“在新窗口打开”的窗口都算作 Pop-up 我也没意见）。在 Android 开发文档中，有 dialog 和 popupwindow 这两种不同的对象，具体区别主要在API分类及其代码编写上，这里就不多扯了。&lt;/p&gt;
&lt;p&gt;另外还有一种 Pop-up 提示框，乒~弹出来过一会自己就默默消失，有些地方也叫作气球提示框（balloon notifications）、提示气泡（notification bubbles）或者吐司（toast）…主要用于非用户主动触发的通知信息。Pop-up的共通点就是，弹多了非！常！惹！人！厌！&lt;/p&gt;
&lt;h2 id=&quot;Popover（弹出框）&quot;&gt;&lt;a href=&quot;#Popover（弹出框）&quot; class=&quot;headerlink&quot; title=&quot;Popover（弹出框）&quot;&gt;&lt;/a&gt;Popover（弹出框）&lt;/h2&gt;&lt;p&gt;其实如果你用wiki搜popover的话，出来的结果是这个（写到这里我饿了…）&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;http://7qnahw.com1.z0.glb.clouddn.com/popbox/Popovers_2.jpg&quot; alt=&quot;popover&quot;&gt;&lt;/p&gt;
&lt;p&gt;其实这个玩意儿最常用的中文名字应该是气泡提示框（不是上面这张图，是下面这张…），反正在我见过的 demo 里，它都会带着一个小尾巴指向其来源。而它究竟是来自于谁就不可考了 ╮(╯_╰)╭ Bootstrap 和 iOS都有以此为名的组件：&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;http://7qnahw.com1.z0.glb.clouddn.com/popbox/popovers.png&quot; alt=&quot;popover&quot;&gt;&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;上图从左到右分别来自&lt;a href=&quot;http://v3.bootcss.com/javascript/#popovers&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;Bootstrap&lt;/a&gt;，&lt;a href=&quot;https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/ContentViews.html#//apple_ref/doc/uid/TP40006556-CH13-SW19&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;iOS 人机交互文档&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;Bootstrap 对 popover 的定义是展示一些非主要的信息，如同重要程度不高的非阻塞无模式对话框。而 iOS 人机界面指南则指出，popover 可以包括信息内容甚至操作选项。&lt;/p&gt;
&lt;h2 id=&quot;异同与设计原则&quot;&gt;&lt;a href=&quot;#异同与设计原则&quot; class=&quot;headerlink&quot; title=&quot;异同与设计原则&quot;&gt;&lt;/a&gt;异同与设计原则&lt;/h2&gt;&lt;p&gt;上面说了那么多，这些框的主要区别还是在于——用途。当你觉得你可能需要一个弹出框的时候，你可以通过这个流程图简单地判断你需要的是哪种：&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;http://7qnahw.com1.z0.glb.clouddn.com/popbox/dialog-flowchat.png&quot; alt=&quot;如何选择流程图&quot;&gt;&lt;/p&gt;
&lt;p&gt;重点在于，这些层层框框会不会影响到你用户原本想要进行的操作？有没有必要影响用户原本想要进行的操作？至于有没有半透明黑色背景，是不是全屏，能不能到处乱拖，有没有小尾巴这些事，也只是为了满足一些基本需要而存在的（黑色背景可以减少原来界面中的元素对用户的干扰，并且提示用户目前操作所在与之前页面的层级关系；全屏也可以减少干扰并容纳更多交互操作的选项；能不能到处乱拖完全就是因为 windows 的报错太智障！！小尾巴用于指明其来源…看需求）。&lt;/p&gt;
&lt;p&gt;其实只要知道自己想要什么样的层层框框，名字什么的，what ever let it go…&lt;/p&gt;
&lt;p&gt;……话又说回来在跟 RD 或者 F2E 交流的时候，可能还是需要明确一下用语。经过我的一番调查（=。=），Android 用的是 dialog、tooltip(toast)，iOS 用的是 modal 和 popover（完全没重复……）……在二者中，dialog 和 modal 是内容组件级别的，而 popup 和 popover 基本上是属于插件级的，也就是说程序员们通常情况下应该还是会选择前者。具体的请认真和你们的程序撕比啦~&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;参考：&lt;/strong&gt;&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;&lt;a href=&quot;https://www.google.com/design/spec/components/dialogs.html#&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;Google Material 设计指南——对话框&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://www.google.com/design/spec/components/tooltips.html&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;Google Material 设计指南——Tooltips&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/ContentViews.html#//apple_ref/doc/uid/TP40006556-CH13-SW19&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;iOS 人际交互指南——popover&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/Modal.html&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;iOS 人机交互指南——modal&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/Alerts.html#//apple_ref/doc/uid/TP40006556-CH14-SW36&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;iOS 人机交互指南——popover和Modal使用细则&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://v3.bootcss.com/javascript/#modals&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;Bootstrap3 中文文档——modal&lt;/a&gt; 有可点击demo&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://materializecss.com/dialogs.html&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;Materialize CSS——tooltip和toast&lt;/a&gt; 有可点击demo&lt;/li&gt;
&lt;/ol&gt;
</content>
    
    <summary type="html">
    
      &lt;p&gt;我们有一个设计师吃货群，聚集了两岸三地海内外的华人吃货话唠设计师，设计师和吃货都是关键词。因为人员背景复杂，经常会出现常用名词都互相不了解的情况，曾经因为“意面”一个词热烈讨论了一个多小时，大抵结论就是台湾的意面并不像内地这样特指意大利面（当然也不是Pasta），是另外一种做法的鸡蛋面（虽然他们当地人也一直说不清2333）。光中文就搞成这样，英文就更不用说，之前群里聊起来 dialog 和 modal 到底哪里不同要怎么用的问题…虽然我觉得用弹出窗口、对话框、气泡提示之类的中文可能更好理解，但是群里很多人表示还是讲英语省得搞不清（虽然我觉得在这里中文反而讲得清…），所以我过来理理清~&lt;br&gt;
    
    </summary>
    
    
      <category term="设计" scheme="http://hikarievo.me/tags/%E8%AE%BE%E8%AE%A1/"/>
    
  </entry>
  
  <entry>
    <title>Date对象及其使用要点</title>
    <link href="http://hikarievo.me/2015/08/15/using-date-object/"/>
    <id>http://hikarievo.me/2015/08/15/using-date-object/</id>
    <published>2015-08-15T08:48:16.000Z</published>
    <updated>2015-08-15T12:46:51.173Z</updated>
    
    <content type="html">&lt;p&gt;前阵子做了一个倒计时的促销，需求很简单，在活动开始前显示活动即将开始的文字，活动中显示倒计时的时钟，在活动结束后显示活动结束的文字。快刀斩乱麻地做了一个本地Demo，用&lt;code&gt;var now = new Date()&lt;/code&gt;获取现在的时间，用Date的构造函数创建了开始时间和结束时间，然后减一下判断一下就OK……&lt;/p&gt;
&lt;p&gt;调试通过之后准备用Ajax把当前时间换成服务器时间，就搞定了……本以为是这样简单的事…后来发现自己 too young too simple&lt;br&gt;&lt;a id=&quot;more&quot;&gt;&lt;/a&gt;&lt;br&gt;用原生js本可以用这种方式获得服务器时间：&lt;br&gt;&lt;figure class=&quot;highlight plain&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;gutter&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;1&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;2&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;3&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;4&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;5&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;6&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;7&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;8&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;9&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;10&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;11&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;var xhr = new XMLHttpRequest();  &lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;if( !xhr )&amp;#123;  &lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;   xhr = new ActiveXObject(&amp;quot;Microsoft.XMLHTTP&amp;quot;);  &lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125;  &lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;xhr.open(&amp;quot;HEAD&amp;quot;,location.href,true);  &lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;xhr.onreadystatechange=function()&amp;#123;  &lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    if( xhr.readyState == 4 &amp;amp;&amp;amp; xhr.status == 200 )&amp;#123;  &lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;         alert(xhr.getResponseHeader(&amp;quot;Date&amp;quot;));  &lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    &amp;#125;  &lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125;  &lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;xhr.send(null);&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;&lt;/p&gt;
&lt;p&gt;但是我在我们服务器上测试的时候发现，无论如何都获得不到正确的信息，查了一下 request 发现服务器返回值居然是403，据说是某些使用 Apache 配置的服务器，不能够仅请求响应头信息…因为我没有权限修改服务器设置（而且也不会2333），只好把HEAD改成GET（&lt;/p&gt;
&lt;p&gt;服务器时间拿来是一段字符串，转成Date对象再一减不就好惹！可是这一转我就傻了…因为字符串拿来是UTC时间（格林威治标准时间），生成Date对象之后再console出来变成了北京时间（UTC+8），但是我的目标用户是日本用户（也就是UTC+9），服务器在美国西海岸呢（UTC-5的样子）…………&lt;/p&gt;
&lt;p&gt;即刻。卒。&lt;/p&gt;
&lt;p&gt;后来跟小伙伴讨论到最后的结论只是基础知识掌握得太糟糕（从没用过Date对象鬼记得住那么多有没有的！），主要重点其实说下来很简单：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Date对象存储的数据是从1970年1月1日0点0分0秒（UTC）到某一时刻的毫秒数，不管你在哪个时区或者设置成什么时区，这个毫秒数是不会变的。&lt;/li&gt;
&lt;li&gt;&lt;code&gt;new Date(string)&lt;/code&gt;或者&lt;code&gt;new Date(year, month[, day[, hour[, minutes[, seconds[, milliseconds]]]]])&lt;/code&gt;所创建的Date对象，未经指定都是以本地时间来创建的。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;在这个需求里，上面两个要点就是，获得&lt;strong&gt;当前时间&lt;/strong&gt;和&lt;strong&gt;目标时间&lt;/strong&gt;（开始和结束时间）的&lt;strong&gt;时间戳&lt;/strong&gt;（就是上面说的毫秒数），因为时间戳都是相对UTC时间而言的，所以根本不需要考虑时区时差这种让人想死的问题。&lt;/p&gt;
&lt;p&gt;目标时间本身是使用字符串记录的，转成数组并生成Date对象的时候，为了避免当地时间对生成结果的影响，于是使用了&lt;code&gt;Date.UTC()&lt;/code&gt;创建，然后再补上时差。比如说：&lt;/p&gt;
&lt;blockquote&gt;
&lt;ol&gt;
&lt;li&gt;我想设置时间 2015 年 8 月 15 日 21 点整，于是我先输入&lt;code&gt;new Date(Date.UTC(2015,7,15,21))&lt;/code&gt;（月份的取值是从0开始的），得到的时间戳是1439672400000。&lt;/li&gt;
&lt;li&gt;但是我实际需要的时间应该是9个小时之前的时间（日本时间晚上9点，UTC时间是中午12点，UTC时间晚上9点，日本时间就已经是第二天早上6点了），也就是32400000毫秒之前。&lt;/li&gt;
&lt;li&gt;所以我需要用第一个时间，减去它们的时间差。&lt;/li&gt;
&lt;li&gt;服务器时间本身就是UTC时间，所以直接转成Date对象就好，不需要额外操作。&lt;/li&gt;
&lt;/ol&gt;
&lt;/blockquote&gt;
&lt;p&gt;可喜可贺。&lt;/p&gt;
&lt;p&gt;接下来就是些细枝末节的事，比如服务器时间与真实时间的时间差，因为正常情况下应该只差几百毫秒，不比我用字符串新建Date对象的误差小多少，所以忽略掉。再比如性能处理，因为不需要时间校正，也就不需要反复请求，于是在活动开始之前，算出当前时间与开始时间的时间差，&lt;code&gt;setTimeout()&lt;/code&gt;一下就好。&lt;/p&gt;
&lt;p&gt;PS: &lt;code&gt;var now = new Date()&lt;/code&gt;，now + 1 会把 now 转成字符串，而 now - 1 会把 now 转成数值，在&lt;code&gt;setTimeout()&lt;/code&gt;之后要对原来的时间戳进行操作，如果没有显式转换过的话，要注意一下…&lt;/p&gt;
</content>
    
    <summary type="html">
    
      &lt;p&gt;前阵子做了一个倒计时的促销，需求很简单，在活动开始前显示活动即将开始的文字，活动中显示倒计时的时钟，在活动结束后显示活动结束的文字。快刀斩乱麻地做了一个本地Demo，用&lt;code&gt;var now = new Date()&lt;/code&gt;获取现在的时间，用Date的构造函数创建了开始时间和结束时间，然后减一下判断一下就OK……&lt;/p&gt;
&lt;p&gt;调试通过之后准备用Ajax把当前时间换成服务器时间，就搞定了……本以为是这样简单的事…后来发现自己 too young too simple&lt;br&gt;
    
    </summary>
    
    
      <category term="JS" scheme="http://hikarievo.me/tags/JS/"/>
    
  </entry>
  
  <entry>
    <title>醍醐灌奶酪</title>
    <link href="http://hikarievo.me/2015/06/14/i-dont-know-cheese/"/>
    <id>http://hikarievo.me/2015/06/14/i-dont-know-cheese/</id>
    <published>2015-06-14T05:52:05.000Z</published>
    <updated>2015-06-17T14:54:58.144Z</updated>
    
    <content type="html">&lt;p&gt;某次和朋友去逛吃，在北京有一种名为“老北京奶酪”的食物，吃起来其实有点像老酸奶…虽然一直以来对于“奶酪”的印象应该是停留在《猫和老鼠》里面 Jerry 最爱的那个黄色的长满了洞洞的玩意儿，但是基于近年来对食物的不断深入的认识及体验，我知道事情远没有这么简单！&lt;/p&gt;
&lt;img src=&quot;http://7qnahw.com1.z0.glb.clouddn.com/photos/nailao.jpg&quot; width=&quot;400&quot; title=&quot;照片镇楼，可惜此人是我基友（比一人吃两份强点…）&quot;&gt;
&lt;a id=&quot;more&quot;&gt;&lt;/a&gt;
&lt;p&gt;一直以来我都认为中国人吃乳制品的历史没有很长，因为中国作为农耕社会，并不需要大量从奶中获取营养，也不需要把奶制作成便于携带的形态，而作为主要奶源的牛，在中国也是主要用来帮助种植，而非取奶饮用。虽然也会有家里的牛下了仔顺道尝尝奶味，但像奶酪这种高热量的食物，出自游牧民族的可能性明显要高很多。&lt;/p&gt;
&lt;p&gt;而从汉字本身来看，说得上与乳制品相关的字，除了乳和奶，也就剩下酪、醍醐、酥这些，而从偏旁看来都能看明白，这些字都是源于酿酒，而非奶了。这应该大概可以反映出，乳制品的制作与酿造有一定的关联。再稍微查一下资料，就会发现，醐这个字出现得要比醍晚得多。大概是南北朝时期，出现了关于乳制品的文字记载，《齐民要术》里也专门写了制酪与干酪（还有马酪…用驴奶和马奶混合做的，想想觉得有点酸爽…），也基本上是同期，出现了“醍醐”一词。&lt;/p&gt;
&lt;p&gt;在南北朝时期的“醍醐”一词有两个意思，其一是梵文मण्डल(máṇḍala，曼荼罗)的音译（不要问我为什么听起来不像），另外一个意思则是某种…美发用品（《魏书》列传九十《西域》记载）。而在唐朝，胡风盛行之时，奶酪也就随之一道来到中国。北本大般涅槃经卷十四圣行品中写道“譬如从牛出乳，从乳出酪，从酪出生酥，从生酥出熟酥，从熟酥出醍醐。醍醐最上，若有服者众病皆除，所有诸药悉入其中。”，这里已经基本上有了乳制品从奶到奶酪的制作过程，而这段话本来是用以比喻人在修行佛法时的差别。既然可以拿来当作喻体，可见那时候的乳制品及其做法已经是无人不知了。&lt;/p&gt;
&lt;p&gt;佛教的“醍醐”本身并非意指精华，而是指&lt;a href=&quot;https://zh.wikipedia.org/wiki/%E6%9B%BC%E8%8D%BC%E7%BE%85&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;某种真实（精髓）&lt;/a&gt;，然而随着佛教的普及推广与发展，“醍醐”也开始逐渐有了褒义，比如白居易的&lt;a href=&quot;https://zh.wikisource.org/zh-hant/嗟髮落&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;《嗟髮落》&lt;/a&gt;（也不知道哪个白痴百科写成嗟落发害我找半天…）“有如醍醐灌，坐受清涼樂。”（不过我是觉得这首诗可以送给谢顶的各位男性同胞……）。醍醐作为佛教用语，和“灌顶”这样的佛教用语组合也就不难理解了，虽说佛教体系中并没有把“醍醐”和“灌顶”组合起来使用的说法，但是在《敦煌變文集》中出现了这样的组合&lt;/p&gt;
&lt;blockquote&gt;&lt;p&gt;又所蒙處分，令問維摩，聞名之如露入心，共語似醍醐灌頂。&lt;/p&gt;
&lt;footer&gt;&lt;strong&gt;敦煌變文集,卷二&lt;/strong&gt;&lt;cite&gt;&lt;a href=&quot;http://ctext.org/wiki.pl?if=gb&amp;chapter=965037#p2608&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;ctext.org/wiki.pl?if=gb&amp;chapter=965037#p2608&lt;/a&gt;&lt;/cite&gt;&lt;/footer&gt;&lt;/blockquote&gt;
&lt;p&gt;原文中除此以外提到“醍醐”的地方，仍指它是某种“饮品”。所以醍醐究竟是个什么鬼！！！&lt;/p&gt;
&lt;p&gt;说到这里，不得不稍微讲一下乳制品…虽然说到牛奶酸奶奶油奶酪黄油什么的，我们似乎都知道一二，但是又说不清楚。之前研究烘焙糕点的时候，光选材料就搞得人一个头三个大，所有中文的讲烘焙、糕点的论坛里，初心向的问答一定有关于如何区分、选择、使用各类乳制品的帖子…继续上图（点图放大）：&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;http://7qnahw.com1.z0.glb.clouddn.com/screenshot/milk_products.png&quot; title=&quot;点我放大&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;&lt;img src=&quot;http://7qnahw.com1.z0.glb.clouddn.com/screenshot/milk_products.png&quot; alt=&quot;Translate frome wikipedia&quot;&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;这张图基本涵盖了西方乳制品的所有种类…在做这张图的时候，我发现造成中文圈乳制品如此之混乱的罪魁祸首，大概是…翻译问题！！比如 Butter，大陆一般叫黄油，而香港叫它黄油，台湾叫奶油…但是大陆的奶油是 Cream，在台湾被称作鲜奶油，而在香港又被称为奶油或者忌廉（指 wipiing cream）…图基本上按照简中翻译做的，但是像保久乳这种，一看就知道是台湾翻译（但是不影响理解就先算了）……总之为了避免理解偏差，我都附了英文在上面…&lt;/p&gt;
&lt;p&gt;有两点值得注意一下，一个是 Soured milk 和 Yogurt，我都翻译成了酸奶…台湾把后者称作优格，但是按照我国法律规定，后者必须叫酸奶…）。另外一个重名的地方是酸奶油（Schmand 和 Sour cream），我查过，这两个东西确实是一个东西…主要区别是脂肪含量不同，后者少一些，顺便我很喜欢吃酸奶油 &amp;gt;&amp;lt;！！！这里我唯一没有写进去的是脂肪含量，这也是不同奶油、黄油之间的主要区别，因为会影响到烘焙时所需要的一些特性，所以在糕点制作上比较重要，有兴趣的可以去看&lt;a href=&quot;https://en.wikipedia.org/wiki/Dairy_product#/media/File:Milkproducts_v2.svg&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;原图&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;从这个图中我们可以看出，牛奶主要有两条进化线（…），第一个是通过真菌或凝乳酶使之凝结，逐步变成干酪（奶酪），另一个是通过搅拌分离获得奶油进而获得黄油。现在我们可以先看看齐民要术了：&lt;/p&gt;
&lt;blockquote&gt;&lt;p&gt;作酪法：〈牛羊乳皆得。別作、和作隨人意。 牛產日，即粉穀如米屑，多著水煮，則作薄粥，待冷飲牛。牛若不飲者，莫與水，明日渴自飲。 牛產三日，以繩絞牛項、脛，令遍身脈脹，倒地即縛，以手痛挼乳核令破，以腳二七遍蹴乳房，然後解放。羊產三日，直以手挼核令破，不以腳蹴。若不如此破核者，乳脈細微，攝身則閉；核破脈開，捋乳易得。曾經破核後產者，不須復治。 牛產五日外，羊十日外，羔、犢得乳力強健，能噉水草，然後取乳。捋乳之時，須人斟酌：三分之中，當留一分，以與羔、犢。若取乳太早，及不留一分乳者，羔、犢瘦死。 三月末，四月初，牛羊飽草，便可作酪，以收其利，至八月末止。從九月一日後，止可小小供食，不得多作：天寒草枯，牛羊漸瘦故也。 大作酪時，日暮，牛羊還，即間羔犢別著一處，凌旦早放，母子別群，至日東南角，噉露草飽，驅歸捋之。訖，還放之，聽羔犢隨母。日暮還別。如此得乳多，牛羊不瘦。若不早放先捋者，比竟，日高則露解，常食燥草，無復膏潤，非直漸瘦，得乳亦少。 捋訖，於鐺釜中緩火煎之——火急則著底焦。常以正月、二月預收乾牛羊矢煎乳，第一好：草既灰汁，柴又喜焦；乾糞火軟，無此二患。常以杓揚乳，勿令溢出；時復徹底縱橫直勾，慎勿圓攪，圓攪喜斷。亦勿口吹，吹則解。四五沸便止。瀉著盆中，勿便揚之。待小冷，掠取乳皮，著別器中，以為酥。 屈木為棬，以張生絹袋子，濾熟乳，著瓦瓶子中臥之。新瓶即直用之，不燒。若舊瓶已曾臥酪者，每臥酪時，輒須灰火中燒瓶，令津出，迴轉燒之，皆使周匝熱徹，好乾，待冷乃用。不燒者，有潤氣，則酪斷不成。若日日燒瓶，酪猶有斷者，作酪屋中有蛇、蝦蟆故也。宜燒人髮，羊牛角以辟之，聞臭氣則去矣。 其臥酪待冷暖之節，溫溫小暖於人體為合宜適。熱臥則酪醋，傷冷則難成。 濾乳訖，以先成甜酪為酵——大率熟乳一升，用酪半匙——著杓中，以匙痛攪令散，瀉著熟乳中，仍以杓攪使均調。以氊、絮之屬，茹瓶令暖。良久，以單布蓋之。明旦酪成。 若去城中遠，無熟酪作酵者，急揄醋飧，研熟以為酵——大率一斗乳，下一匙飧——攪令均調，亦得成。其酢酪為酵者，酪亦醋；甜酵傷多，酪亦醋。 其六七月中作者，臥時令如人體，直置冷地，不須溫茹。冬天作者，臥時少令熱於人體，降於餘月，茹令極熱。〉&lt;/p&gt;
&lt;footer&gt;&lt;strong&gt;齐民要术&lt;/strong&gt;&lt;cite&gt;卷六 養羊第五十七&lt;/cite&gt;&lt;/footer&gt;&lt;/blockquote&gt;
&lt;p&gt;这段话大意就是挤出来的奶（前面1/3都在讲怎么挤奶…）加热，晾凉后的奶皮是“酥”，然后放到一个瓶子里发酵，发酵成固体之后就是酪了，而刚发酵成的甜酪又可以作为酵母制作之后的酪。之后书里还描述了做干酪、湿酪，以及抨酥的做法…在开元盛世的时候，乳制品的做法随着朝鲜人传入日本，到现在都还有传统的“酥”（飛鳥の蘇）的做法保留（不都说想看长安就去京都…），大概就是一直煮牛奶，煮到水分全煮掉之后放进冰箱，过一晚拿出来的就是日本的酥了（嗯，目测已经不是中国的酥了），从色泽和质地上来看，是属于奶酪的。&lt;/p&gt;
&lt;p&gt;那么回来看醍醐，明朝李时珍的《本草綱目》写了酪、酥与醍醐的做法，其中关于醍醐的部分，《本草》说：“醍醐出酥中，乃酥之精液也。好酥一石，有三四升醍醐。”，明清时候 1 石（dàn）是 100 升（跟现在的升一样），然后他援引了很多中说法：韓保升曰︰一說︰在酥中，盛冬不凝、盛夏不融者，是也。宗奭曰︰作酪時，上一重凝者為酪面，酪面上，其色如油者為醍醐。熬之即出，不可多得，極甘美，用處亦少。 曰︰醍醐乃酪之漿。凡用以重綿濾過，銅器煎三兩沸用。藏器曰︰此物性滑，物盛皆透，惟雞子殼及壺蘆盛之，乃不出也。&lt;/p&gt;
&lt;p&gt;再翻明朝以前（主要是唐前后的）的文献就不太容易找得到醍醐的定义了…所以现在能搜到的醍醐主要也就是《本草》提到的几种说法了：奶酪上面像油一样的东西；或者是酥的精华…在《敦煌變文集》中所说的醍醐是用来饮用的，《本草》中比较明确的一点也说是产量非常低…可以喝的，油一样…个人估测了一下，大约是乳清黄油、乳清奶酪或液体黄油中的某一个分支……嗯，没有更多证据了…………&lt;/p&gt;
&lt;p&gt;终于回归正题…我其实一开始只是想知道我吃的奶酪究竟是哪种…下面来大概分析一下（顺手把我国主要常见的乳制品都列了一下…出门左转有淘宝………&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;宫廷奶酪&lt;/strong&gt;：北京小吃，满清入关之后带来的，宫廷奶酪是用米酒或者酒酿制成的，主要是利用了酒中所含有的真菌进行凝乳，因为有细菌发酵过程，所以属于第一支进化线，也就是说，宫廷奶酪是介于酸奶到半凝乳之间的某种产物~&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;双皮奶&amp;amp;姜汁撞奶&lt;/strong&gt;：南方传统食物，属于汉民小吃，据说最早用的是水牛奶。双皮奶是使用蛋清加热凝结，姜汁撞奶是使用姜汁来使乳糖凝结。准确说来前者并不在上面的表里，而后者应该属于鲜奶酪~&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;酥油茶&lt;/strong&gt;：藏民饮品。把牛奶（大概是牦牛奶？）或者羊奶加热后捶打分离，将脂肪单独提取出来制成酥油。对照上面的图…酥油应该是属于黄油的某一种~&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;奶卷 \ 奶豆腐 \ 奶渣&lt;/strong&gt;：奶卷也是北京小吃，估计同样是满清带来的，奶豆腐是内蒙古小吃，而奶渣是西藏小吃（同属游牧民族呀）。奶卷是把做到一半的宫廷奶酪过滤掉水分制成的，奶豆腐则分成酸奶滤水和制酥油剩下的奶滤水制成的两种，奶渣是制作酥油茶后剩下的成分制成…虽然名字不同做法都略有区别，但基本上都属于凝乳这一行列的。&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;乳扇&lt;/strong&gt;：云南少数民族传统小吃，用山羊奶与酸水同煮，把凝结成块的奶捞起来晾干就成了乳扇。酸水中应该含有某种凝乳酶，因此乳扇应该属于干酪这一支。&lt;br&gt;&lt;a href=&quot;http://blog.fo.ifeng.com/article/21008213.html&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;乳扇的做法&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;说了这么多有的没的…其实也只是为了满足一下自己的好奇心。在写这篇文的时候我也逐渐意识到，中国的乳制品种类确实并不比西方的少，只是因为生活环境与习惯的不同，其形态与我们平时所习惯的有所不同罢了。使用不同的凝乳采取不同的顺序发酵都能为乳制品带来不同的风味，加上其本身品质的多变性（根据产奶者的身体情况，其产下的奶的成分也会有所变化），进而影响口味和口感，才是乳制品丰富多变的魅力所在。&lt;/p&gt;
&lt;p&gt;最后说句题外话，一说到乳制品就一定会有乳糖不耐受患者跳出来大喊与我无关…其实我本人也是乳糖不耐受的受害者，幼儿园每天喝鲜牛奶简直是不堪回首的记忆，大概感觉就是让我喝药都比喝牛奶痛快。但是随着乳制品加工（掺水？）技术的不断发展，也有了很多对乳糖不耐受患者更加友好的选择。从奶本身来说…现在市售的大部分鲜奶对我已经没有什么威力可言了，感觉就像奶粉冲的一样。从加工原理来看，酸奶家族和部分奶酪，奶油以及黄油所含乳糖都是较少的，量力而行的话也不是完全不能接受…当然还是&lt;a href=&quot;https://zh.wikipedia.org/wiki/%E4%B9%B3%E7%B3%96%E4%B8%8D%E8%80%90%E7%97%87&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;因人而异&lt;/a&gt;啦~&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;延伸材料：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://en.wikipedia.org/wiki/List_of_dairy_products&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;List of dairy products&lt;/a&gt;—— 英文wiki的乳制品列表，里面提到了“醍醐”（Daigo）和“酥”（So），然而产地都标注的是日本…我国的战士去哪了！！！！当然主要就是个世界各地乳制品一览（说到头做法还不是大同小异…）&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://web.archive.org/web/20090825095435/http://miraikoro.3.pro.tok2.com/study/genbutu/genbutunihonshi18.htm&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;古代　012　古代の酥（そ）・蘇（そ）&lt;/a&gt;—— 一个日文网站，原地址已经不可考了，现在只能用 Wayback Machine 看到远在 09 年的存档了…日本人通常认为日本的酥就是所谓的醍醐，但是这位作者一路考证下来，认为醍醐是根本不存在的食物，只是作为一种抽象的，最棒的乳制品的概念性的存在。不管是哪个我都不同意啦（摔！&lt;/li&gt;
&lt;li&gt;《中国传统乳制品加工与质量控制》ISBN: 9787501963904—— QwQ 找资料的时候看到的…网上搜不到电子版，不知道有没有机会去图书馆借这本出来看，光看目录和第一章预览就觉得好有看头啊啊啊啊！（如果有哪位看过请务必在豆瓣上添加读后感2333……&lt;/li&gt;
&lt;/ul&gt;
</content>
    
    <summary type="html">
    
      &lt;p&gt;某次和朋友去逛吃，在北京有一种名为“老北京奶酪”的食物，吃起来其实有点像老酸奶…虽然一直以来对于“奶酪”的印象应该是停留在《猫和老鼠》里面 Jerry 最爱的那个黄色的长满了洞洞的玩意儿，但是基于近年来对食物的不断深入的认识及体验，我知道事情远没有这么简单！&lt;/p&gt;
&lt;img src=&quot;http://7qnahw.com1.z0.glb.clouddn.com/photos/nailao.jpg&quot; width=&quot;400&quot; title=&quot;照片镇楼，可惜此人是我基友（比一人吃两份强点…）&quot;&gt;
    
    </summary>
    
    
      <category term="杂谈" scheme="http://hikarievo.me/tags/%E6%9D%82%E8%B0%88/"/>
    
      <category term="考据" scheme="http://hikarievo.me/tags/%E8%80%83%E6%8D%AE/"/>
    
      <category term="吃" scheme="http://hikarievo.me/tags/%E5%90%83/"/>
    
  </entry>
  
  <entry>
    <title>如何通过CSS设置打印页面</title>
    <link href="http://hikarievo.me/2015/03/30/how-to-creat-a-print-page/"/>
    <id>http://hikarievo.me/2015/03/30/how-to-creat-a-print-page/</id>
    <published>2015-03-30T14:49:41.000Z</published>
    <updated>2015-04-11T08:13:34.109Z</updated>
    
    <content type="html">&lt;p&gt;在这个无纸化的时代里，打印似乎是离我们越来越遥远的事情了（对！我只会写冷门和偏门的东西！），当然我们也不能因此忽略掉这部分用户的需求。像是预订的订单，产品的规格书这些，多少还是有打印需求的。而且如果页面有做过打印适配的话，用户（虽然可能只有1%）也会很高兴啦 XD&lt;br&gt;&lt;a id=&quot;more&quot;&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;打印页面的样式可用通过 media query 设置，在 css 文件中增加&lt;code&gt;@media print{ ... }&lt;/code&gt;，并在里面书写样式就可以了，缺省的部分会按照默认情况下的样式进行输出（使用 RWD 的小伙伴务必要注意）。&lt;/p&gt;
&lt;h2 id=&quot;基本设置&quot;&gt;&lt;a href=&quot;#基本设置&quot; class=&quot;headerlink&quot; title=&quot;基本设置&quot;&gt;&lt;/a&gt;基本设置&lt;/h2&gt;&lt;p&gt;header、footer、nav 还有 sidebar 是不需要的，&lt;code&gt;display:none&lt;/code&gt;就好。多媒体元素如果没有非常的必要，大都也可以隐藏，如果需要展示，可以为图片设置宽度（或者&lt;code&gt;max-width: 100%&lt;/code&gt;），以防图片占据过多空间（以及浪费太多墨水233），视频则可以考虑适当替换成图片或文字。&lt;/p&gt;
&lt;h2 id=&quot;尺寸及文字设置&quot;&gt;&lt;a href=&quot;#尺寸及文字设置&quot; class=&quot;headerlink&quot; title=&quot;尺寸及文字设置&quot;&gt;&lt;/a&gt;尺寸及文字设置&lt;/h2&gt;&lt;p&gt;事实上 W3C 针对打印媒体制定了&lt;a href=&quot;http://www.w3.org/TR/css3-page/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;一套标准&lt;/a&gt;，规定了类似于 Box Model 的 Page Model，并将 page 周围划分为 16 个区域（也就是页眉、页脚、订口、切口），支持分别定义尺寸样式内容。然而草案推出到现在整整两年，这个草案中的内容也只有&lt;code&gt;@page&lt;/code&gt;支持程度稍广，没有办法修改具体每个区域的内容（摊手）。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;顺带一提，草案中有&lt;code&gt;@page:first&lt;/code&gt;这样的写法，可以为第一页单独设置边距。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;话又说回来，chrome 也可以自定义边距，总之打印在这块确实是有点乱乱的。&lt;/p&gt;
&lt;p&gt;文字部分的话，建议以 pt 为单位设置，不过普通的 px 也没有问题 XDD 按照印刷的习惯，12 pt（px 也可以，下同）是普通内文的字号，标题 16 pt、18 pt 到 24 pt 都可以，如果不知道怎么办，可以在 PS 里按照 72 dpi 新建一个 A4 画面，然后把字排进去就 OK。&lt;/p&gt;
&lt;h2 id=&quot;特殊设置&quot;&gt;&lt;a href=&quot;#特殊设置&quot; class=&quot;headerlink&quot; title=&quot;特殊设置&quot;&gt;&lt;/a&gt;特殊设置&lt;/h2&gt;&lt;p&gt;虽然是打印页面，但原来网页中的 DOM 结构还是不会变的，如果你想要修改 DOM 结构或者其他啥的，要么是直接修改源码，要么就是在页面加载完成之后用 JS 修改。像是原本白色的图片，要换成黑色的，还有原本在页面中浮动或绝对定位的元素，也要摆放到正确的位置上（&lt;code&gt;position:static;float:none;&lt;/code&gt;可以清除定位和浮动设置）。左右并置的内容，根据需要看是否改成上下排列，人在纸张上的阅读习惯可是跟网页上有大不同。&lt;/p&gt;
&lt;p&gt;另外一个需要注意的点是超链接，在网页上，我们随便点击一下超链接就可以了，但是拿着打印出来的纸的人要怎么办！！戳纸吗！！一般来说这样写就好&lt;br&gt;&lt;figure class=&quot;highlight css&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;gutter&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;1&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;2&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;3&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;4&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;5&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;selector-tag&quot;&gt;a&lt;/span&gt;&lt;span class=&quot;selector-pseudo&quot;&gt;:after&lt;/span&gt;&amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &lt;span class=&quot;attribute&quot;&gt;content&lt;/span&gt;: &lt;span class=&quot;string&quot;&gt;&#39;(&#39;&lt;/span&gt; &lt;span class=&quot;built_in&quot;&gt;attr&lt;/span&gt;(href) &lt;span class=&quot;string&quot;&gt;&#39;)&#39;&lt;/span&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &lt;span class=&quot;attribute&quot;&gt;word-break&lt;/span&gt;: break-all;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &lt;span class=&quot;comment&quot;&gt;/* 顺手再写点别的样式也没关系，但是要注意黑白打印嗯… */&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;&lt;/p&gt;
&lt;p&gt;但是像我们的网站，用的是牛逼烘烘的 JS 跳转…这个时候就只好用自定义属性&lt;code&gt;data-*&lt;/code&gt;来挽救一下，用 JS 把原本的&lt;code&gt;href&lt;/code&gt;属性值拿出来并提取地址，写到&lt;code&gt;data-href&lt;/code&gt;里，然后在 CSS 中，调用 data-href 而非 href 的值就好（关于&lt;code&gt;content&lt;/code&gt;属性的取值问题，可以参考我之前的&lt;a href=&quot;http://hikarievo.me/2015/03/11/pseudo-elements-content/&quot;&gt;另一篇文&lt;/a&gt;）。&lt;/p&gt;
&lt;p&gt;再剩下的，就是有些人会在打印页面里加入感谢信息，或者只有在打印页面中可见的信息，这都是根据需要来啦。&lt;/p&gt;
&lt;p&gt;BTW：浏览器默认会在页眉页脚加入页面标题，张数信息以及所打印页面网址等信息，大概这也是浏览器不让我们修改页眉页脚信息的主要原因。当然如果你把页面的边距设为0，浏览器也不会强行插入的…&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;再仔细思考了一下感觉确实也蛮简单的样子，反正浏览器都有打印预览，所以其实并不担心会出现什么特别奇葩的情况，print 的情况一般也是唯一的，在 CSS 中狂用 !important 也不会怎样…总之就是一切还好还好 XDD&lt;/p&gt;
&lt;p&gt;最后。我想。推荐一下… &lt;a href=&quot;http://printstylesheet.com/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;prrint style sheet&lt;/a&gt;这款 css，如果你懒得为自己的网站写 print 样式，那么直接拿来用也不错（不要在我的博客上用打印预览，我根本没做打印样式 XDDD&lt;/p&gt;
</content>
    
    <summary type="html">
    
      &lt;p&gt;在这个无纸化的时代里，打印似乎是离我们越来越遥远的事情了（对！我只会写冷门和偏门的东西！），当然我们也不能因此忽略掉这部分用户的需求。像是预订的订单，产品的规格书这些，多少还是有打印需求的。而且如果页面有做过打印适配的话，用户（虽然可能只有1%）也会很高兴啦 XD&lt;br&gt;
    
    </summary>
    
    
      <category term="CSS" scheme="http://hikarievo.me/tags/CSS/"/>
    
  </entry>
  
  <entry>
    <title>儿时玩过的那些深深伤害了我幼小心灵的游戏</title>
    <link href="http://hikarievo.me/2015/03/17/the-games-i-played-in-my-childhood/"/>
    <id>http://hikarievo.me/2015/03/17/the-games-i-played-in-my-childhood/</id>
    <published>2015-03-17T10:58:16.000Z</published>
    <updated>2015-03-25T15:31:02.920Z</updated>
    
    <content type="html">&lt;p&gt;起因是在某次查资料的时候查到了 SkiFree 这款游戏，一看图片就让我想起小时候玩这款游戏留下的无数阴影…游戏本身很简单，就是一路往下滑，遇到石头的时候跳过去，遇到大树躲开，没有积分，没有排名，什么都没有……但是，它有…&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;http://hikarievo.qiniudn.com/screenshot/Skifree_yeti.png&quot; alt=&quot;SkiFree Yeti&quot;&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;http://en.wikipedia.org/wiki/SkiFree&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;wiki&lt;/a&gt;上说当玩家下滑超过1500米之后，就会有一只雪怪冲出来，追着玩家跑。我一般是在雪怪出现后的 10 秒之内就缴械投降了…因为被雪怪追上然后吃掉实在太可怕，当时一直不知道自己究竟做错了些什么，要被如此追逐。我自己也没想到这个谜题竟然会在十多年后以这种方式解开…雪怪只是提示玩家游戏结束的一种方式…………真是太友善了。&lt;br&gt;&lt;a id=&quot;more&quot;&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;后来我又找了一下当初玩的游戏，那时候家里是有一台小霸王的，魂斗罗炸弹人马戏团雪人兄弟马里奥医生这些游戏都玩过（还跟爷爷抢过玩挖金币），之后渐渐失去对电视的控制权，我的娱乐也慢慢随之变成电脑游戏……想来是这些游戏大都给我留下不怎么好的印象，所以我才没有那么沉迷（直到下载了 GBC 模拟器玩起了 PM 系列为止）…想来写这样一篇东西也不过权当纪念。&lt;/p&gt;
&lt;h2 id=&quot;SkiFree&quot;&gt;&lt;a href=&quot;#SkiFree&quot; class=&quot;headerlink&quot; title=&quot;SkiFree&quot;&gt;&lt;/a&gt;SkiFree&lt;/h2&gt;&lt;p&gt;开篇提到的这游戏，wiki 上也详细说了向上走多少米、向左右走多少米也会出现雪怪，然后如果你很牛逼的话，最多可以让 3 只雪怪追着你跑…而下滑超过一定距离后，距离表就会跳回负多少米…也就是无限 loop。我当时也是尝试过这些的（向上走向两边走），但是基本上都因为太慢而中途放弃了（除了向下滑很快，其他三个方向的移动速度都是超级慢的…）。明明很害怕被吃掉的那一瞬，也想要磨练技术逃离魔爪，但是无论哪个都没做到 XD 大概天生就没有玩游戏的基因……&lt;/p&gt;
&lt;h2 id=&quot;Wolfenstein-3D&quot;&gt;&lt;a href=&quot;#Wolfenstein-3D&quot; class=&quot;headerlink&quot; title=&quot;Wolfenstein 3D&quot;&gt;&lt;/a&gt;Wolfenstein 3D&lt;/h2&gt;&lt;p&gt;&lt;img src=&quot;http://hikarievo.qiniudn.com/screenshot/Wolf3d_title.png&quot; alt=&quot;Wolfenstein 3D Title&quot;&gt;&lt;/p&gt;
&lt;p&gt;这款游戏的中文名字叫《德军总部3D》，据说是第一款商业化的第一人称射击游戏。打倒路上遇到的敌人，升级装备，打倒守层的 boss 就可以突破。而在迷宫里也有隐藏门的存在，里面可能是高级的武器，也有可能是非常强的怪……游戏比较有特色的地方是场景是伪 3D 的，甚至还有最基础的光线计算。&lt;/p&gt;
&lt;p&gt;我最早只是看哥在玩，觉得似乎蛮有趣，但每层的大 boss 特别让我害怕（因为这个游戏的 boss 只有一个角度…不管你怎么看过去都是正面…），而隐藏门里碰到敌人的时候也是各种害怕，因为大概知道自己离死不远了，而自己被打死的时候满屏幕的鲜红，大概就是我心理阴影在屏幕上的投影面积……&lt;/p&gt;
&lt;h2 id=&quot;Commander-Keen&quot;&gt;&lt;a href=&quot;#Commander-Keen&quot; class=&quot;headerlink&quot; title=&quot;Commander Keen&quot;&gt;&lt;/a&gt;Commander Keen&lt;/h2&gt;&lt;p&gt;&lt;img src=&quot;http://hikarievo.qiniudn.com/screenshot/commander-keen-2-ss1.gif&quot; alt=&quot;Commander Keen 2&quot;&gt;&lt;/p&gt;
&lt;p&gt;开始一直搜不到这款游戏，后来干脆直接 google 了 90s 的游戏图片，然后找到了它——《指挥官基恩》。开始看到的截图只能说是似曾相识，但在细节上又与我的记忆大相径庭，在 wiki 里注意到这款游戏出了超多代，甚至还有 GBC 平台的…后来在一个老游戏下载网站找到我当年玩的那版（现在看来觉得做的好烂…）。玩法算是比较传统的横版卷轴，现在仔细想一下，貌似跟星之卡比蛮像的 OvO 也是要一个一个开地图~&lt;/p&gt;
&lt;p&gt;这游戏里，主角如果死掉，就是下半身被怪吃掉或者被火烧掉或者被夹子夹掉……总之是死无全尸…虽然制作烂到不是那么容易看出来，但是看多了还是觉得很不舒服…&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;…可能因为天生手残加胆小的缘故，对于 ACT 整个类别下的游戏都无一擅长…超级玛丽、魂斗罗这种经典之作，都连一半都玩不到，《盟军敢死队》更是连，上面说的这三款也是…可能就是因为遗憾，所以才一直纠结着忘不掉（望天…）不过就算忘不掉，就算现在给我玩，我大概也没有耐心和勇气玩下去…回忆什么的就让它在回忆里好了……&lt;/p&gt;
&lt;p&gt;为了搜这些游戏找到&lt;a href=&quot;http://www.bestoldgames.net/eng/old-games/commander-keen-2.php&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;一个网站&lt;/a&gt;，链接是我玩的这版基恩…当然现在要装 DOS 虚拟机才能玩了…里面还有很多古老的游戏，如果各位看官有什么回忆的话也可以找找看……另外我当年比较喜欢的，则是益智类游戏（到现在都是…），顺便大赞一款当年的中文 DOS 游戏——《大唐诗录》，全程中文语音加上传统 BGM …玩的相当带感，到现在都还记得是卡在一个实在看不懂满眼鬼画符的地方（这几年看了攻略才知道那里是给古文断句…可是我当时是连行书都不太会辨认……），这款给我留下的阴影大概只有…没有成功破关而已 &amp;gt;&amp;lt;&lt;/p&gt;
</content>
    
    <summary type="html">
    
      &lt;p&gt;起因是在某次查资料的时候查到了 SkiFree 这款游戏，一看图片就让我想起小时候玩这款游戏留下的无数阴影…游戏本身很简单，就是一路往下滑，遇到石头的时候跳过去，遇到大树躲开，没有积分，没有排名，什么都没有……但是，它有…&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;http://hikarievo.qiniudn.com/screenshot/Skifree_yeti.png&quot; alt=&quot;SkiFree Yeti&quot;&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;http://en.wikipedia.org/wiki/SkiFree&quot;&gt;wiki&lt;/a&gt;上说当玩家下滑超过1500米之后，就会有一只雪怪冲出来，追着玩家跑。我一般是在雪怪出现后的 10 秒之内就缴械投降了…因为被雪怪追上然后吃掉实在太可怕，当时一直不知道自己究竟做错了些什么，要被如此追逐。我自己也没想到这个谜题竟然会在十多年后以这种方式解开…雪怪只是提示玩家游戏结束的一种方式…………真是太友善了。&lt;br&gt;
    
    </summary>
    
    
      <category term="杂谈" scheme="http://hikarievo.me/tags/%E6%9D%82%E8%B0%88/"/>
    
  </entry>
  
  <entry>
    <title>神奇的伪元素content属性</title>
    <link href="http://hikarievo.me/2015/03/11/pseudo-elements-content/"/>
    <id>http://hikarievo.me/2015/03/11/pseudo-elements-content/</id>
    <published>2015-03-11T14:06:25.000Z</published>
    <updated>2015-03-12T17:34:16.631Z</updated>
    
    <content type="html">&lt;p&gt;伪元素就是在 CSS 文件中选中的，实际上是不存在在 DOM 中的元素，早在 CSS1 的方案中就提出了&lt;code&gt;:first-letter&lt;/code&gt;和&lt;code&gt;:first-line&lt;/code&gt;这两个伪元素（也就是说 IE5.5 这种史前怪兽也可以做首字下沉和首行特效…），在CSS2中则添加了&lt;code&gt;:before&lt;/code&gt;和&lt;code&gt;:after&lt;/code&gt;伪元素，在CSS3中，为了区别伪元素与伪类，则让伪元素使用&lt;code&gt;::&lt;/code&gt;作为前缀（IE从 IE9 开始支持 :: 伪元素）。&lt;/p&gt;
&lt;p&gt;&lt;code&gt;:before&lt;/code&gt;和&lt;code&gt;:after&lt;/code&gt;这对好兄妹在初登场的时候使用得并不频繁，因为根据 CSS2.1 的描述，它们是用来显示那些作者不希望出现在文档树中，可以让浏览器自动生成的内容：&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;In some cases, authors may want user agents to render content that does not come from the document tree. One familiar example of this is a numbered list; the author does not want to list the numbers explicitly, he or she wants the user agent to generate them automatically. Similarly, authors may want the user agent to insert the word “Figure” before the caption of a figure, or “Chapter 7” before the seventh chapter title. For audio or braille in particular, user agents should be able to insert these strings.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;后来的人们把这些棒棒的 idea 全部弃之不用，反之利用它的特性来完成很多黑科技手法：其主要用法之一是让它们充当 clear fix （清除浮动）以及避免 margin collapse （margin合并）的元素，从而保持干净整洁的 DOM 文档树。另外还有使用伪元素来做 icon （Bootstrap 所使用的 Font Awesome 以及现在绝大多数 @font-face 做 icon 的基本上都是这么做）。后来伴随着 CSS3 所支持的更多效果，慢慢就出现了一些丧病的 绘图，开始看到的是&lt;a href=&quot;http://tympanus.net/Tutorials/CSSButtonsPseudoElements/index3.html&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;像这样&lt;/a&gt;的伪 3D 特效，然后代码死宅们还放出了 &lt;a href=&quot;http://one-div.com/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;One div&lt;/a&gt; 这种实用奇特小 icon 和 &lt;a href=&quot;http://a.singlediv.com/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;A Single Div&lt;/a&gt; 这种明显就是炫技的作品……&lt;/p&gt;
&lt;p&gt;各种情况表明现在这对好兄妹完全是肆无忌惮的泛滥状态，但上面举例这些却只是神奇伪元素的一部分用法——&lt;code&gt;content&lt;/code&gt;属性值为字符串或空，从当时来看（乃至现在来看），根本都属于黑科技的一类。但其实伪元素&lt;code&gt;:before&lt;/code&gt;和&lt;code&gt;:after&lt;/code&gt;还有很多其他可选的属性值…而且那才是人家被创造出来的本意啊！！！&lt;br&gt;&lt;a id=&quot;more&quot;&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h2 id=&quot;quote系列和none&quot;&gt;&lt;a href=&quot;#quote系列和none&quot; class=&quot;headerlink&quot; title=&quot;quote系列和none&quot;&gt;&lt;/a&gt;quote系列和none&lt;/h2&gt;&lt;p&gt;把这俩放一起说是因为我真的看不太出来…这俩有什么用。none还好说，就是清空这个伪元素。一个伪元素如果没有 content 属性就直接消失了，如同它未曾存在过（但是normal的默认值就是等于none，而且这个属性貌似不继承…&lt;/p&gt;
&lt;p&gt;quote系列是指open-quote、close-quote、no-open-quote、no-close-quote四个属性值…默认情况下open-quote就会显示为上引号，close-quote会显示为下引号…可以通过父元素的quote属性来为其重新赋值，以配合不同语言的引号需求。翻了一下 W3c 标准的文档，关于 quote 系列的示例如下：&lt;br&gt;&lt;figure class=&quot;highlight css&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;gutter&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;1&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;2&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;3&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;4&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;5&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;6&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;comment&quot;&gt;/* 创建不同语言的 quotes 符号 */&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;selector-tag&quot;&gt;q&lt;/span&gt;&lt;span class=&quot;selector-pseudo&quot;&gt;:lang(en)&lt;/span&gt; &amp;#123; &lt;span class=&quot;attribute&quot;&gt;quotes&lt;/span&gt;: &lt;span class=&quot;string&quot;&gt;&#39;&quot;&#39;&lt;/span&gt; &lt;span class=&quot;string&quot;&gt;&#39;&quot;&#39;&lt;/span&gt; &lt;span class=&quot;string&quot;&gt;&quot;&#39;&quot;&lt;/span&gt; &lt;span class=&quot;string&quot;&gt;&quot;&#39;&quot;&lt;/span&gt; &amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;selector-tag&quot;&gt;q&lt;/span&gt;&lt;span class=&quot;selector-pseudo&quot;&gt;:lang(no)&lt;/span&gt; &amp;#123; &lt;span class=&quot;attribute&quot;&gt;quotes&lt;/span&gt;: &lt;span class=&quot;string&quot;&gt;&quot;«&quot;&lt;/span&gt; &lt;span class=&quot;string&quot;&gt;&quot;»&quot;&lt;/span&gt; &lt;span class=&quot;string&quot;&gt;&#39;&quot;&#39;&lt;/span&gt; &lt;span class=&quot;string&quot;&gt;&#39;&quot;&#39;&lt;/span&gt; &amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;comment&quot;&gt;/* 设置伪元素 */&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;selector-tag&quot;&gt;q&lt;/span&gt;&lt;span class=&quot;selector-pseudo&quot;&gt;:before&lt;/span&gt; &amp;#123; &lt;span class=&quot;attribute&quot;&gt;content&lt;/span&gt;: open-quote &amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;selector-tag&quot;&gt;q&lt;/span&gt;&lt;span class=&quot;selector-pseudo&quot;&gt;:after&lt;/span&gt;  &amp;#123; &lt;span class=&quot;attribute&quot;&gt;content&lt;/span&gt;: close-quote &amp;#125;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;&lt;/p&gt;
&lt;p&gt;那么当HTML为&lt;br&gt;&lt;figure class=&quot;highlight plain&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;gutter&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;1&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;2&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;3&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;4&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;5&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;6&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;7&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;8&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&amp;lt;HTML lang=&amp;quot;no&amp;quot;&amp;gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &amp;lt;HEAD&amp;gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &amp;lt;TITLE&amp;gt;Quotes&amp;lt;/TITLE&amp;gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &amp;lt;/HEAD&amp;gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &amp;lt;BODY&amp;gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    &amp;lt;P&amp;gt;&amp;lt;Q&amp;gt;Trøndere gråter når &amp;lt;Q&amp;gt;Vinsjan på kaia&amp;lt;/Q&amp;gt; blir deklamert.&amp;lt;/Q&amp;gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;  &amp;lt;/BODY&amp;gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;lt;/HTML&amp;gt;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;&lt;/p&gt;
&lt;p&gt;的时候，显示结果为：&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;«Trøndere gråter når “Vinsjan på kaia” blir deklamert.»&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;这个示例其实解决了我很多疑惑（有问题问标准嗯嗯），从国内环境来说，首先我们缺乏这种转换的需求（就连 zh-hant 和 zh-hans 之间的转换都鲜有问津），其次我们的设计和前端代码里都不会特地区分“某人所说的话”这样的内容…所以（摊手…）如果是多语言网站，并且有这种需求，可以参考。&lt;/p&gt;
&lt;p&gt;另外邪道一点的想法就是把 quote 改成各种符号…实用性上没找到什么亮点……&lt;/p&gt;
&lt;h2 id=&quot;url&quot;&gt;&lt;a href=&quot;#url&quot; class=&quot;headerlink&quot; title=&quot;url()&quot;&gt;&lt;/a&gt;url()&lt;/h2&gt;&lt;p&gt;括号里填上随便一个图片、音频、视频的地址，就搞定了。填图片的做法与用 @font-face 做 icon 有些相似，放大图的话又好似 background。如果配合:hover伪类或者[check]这种黑科技的话…倒是可以抛弃js实现一些比较炫酷的声光电一体特效（思路参见使用 radio 实现纯 css slider 的黑科技&lt;a href=&quot;http://tympanus.net/Tutorials/CSS3FluidParallaxSlideshow/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;demo&lt;/a&gt;）。&lt;/p&gt;
&lt;h2 id=&quot;attr&quot;&gt;&lt;a href=&quot;#attr&quot; class=&quot;headerlink&quot; title=&quot;attr()&quot;&gt;&lt;/a&gt;attr()&lt;/h2&gt;&lt;p&gt;在括号里填上个属性名，就可以将该伪元素所属的元素的该属性值读出来，返回字符串并作为这个伪元素的内容。常见的做法之一是在 print 页面中，让伪元素读取&lt;code&gt;a&lt;/code&gt;元素的&lt;code&gt;href&lt;/code&gt;属性，以便用户访问。另外这几天做的一个新 demo 里，需要一个图片悬停出现黑色遮罩和说明文字的效果。于是给图片的父元素设置了两个伪元素，一个用来当作黑色遮罩，另一个则读取单独写入的&lt;code&gt;data-*&lt;/code&gt;属性值来作为显示的文字内容~甚至可以丧病地读取多个内容，实现多行内容……&lt;/p&gt;
&lt;p&gt;随手写了一个&lt;a href=&quot;http://runjs.cn/detail/m82oasx9&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;demo&lt;/a&gt;，包括了伪元素折行和图片水平分布两个黑科技…欢迎围观和吐槽&lt;/p&gt;
&lt;p&gt;BTW, &lt;code&gt;attr()&lt;/code&gt;作为 CSS 中为数不多的函数（在 CSS 中被称为 Functional Notation），在 CSS3 中被赋予了更多的黑科技，不过鉴于没有浏览器实现，就仅附上 &lt;a href=&quot;http://www.w3.org/TR/css3-values/#attr-notation&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;W3C 标准（英文）&lt;/a&gt;和 &lt;a href=&quot;https://developer.mozilla.org/zh-CN/docs/Web/CSS/attr&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;MDN参考文档&lt;/a&gt;，剩下的有空再谈（又给自己挖坑…&lt;/p&gt;
&lt;h2 id=&quot;counter-s&quot;&gt;&lt;a href=&quot;#counter-s&quot; class=&quot;headerlink&quot; title=&quot;counter[s]&quot;&gt;&lt;/a&gt;counter[s]&lt;/h2&gt;&lt;p&gt;content 属性里面非常有趣的的一位就是它了，华丽丽的计数器。有序列表&lt;code&gt;ol&lt;/code&gt;下的每一个&lt;code&gt;li&lt;/code&gt;元素都会默认有数字编号，而 counter 则可以完成更加复杂的嵌套列表的序号。&lt;/p&gt;
&lt;p&gt;不过 counter 用起来也挺麻烦的，首先要重置计数器：为父元素的样式添加&lt;code&gt;counter-reset&lt;/code&gt;属性，属性值为计数器的名字。然后在需要显示计数数值的元素的伪元素上，添加&lt;code&gt;counter-increment: counter-name&lt;/code&gt;的属性，并把&lt;code&gt;content&lt;/code&gt;属性写为&lt;code&gt;counter(counter-name)&lt;/code&gt;就可以了。&lt;/p&gt;
&lt;p&gt;&lt;code&gt;counter-increment&lt;/code&gt;这个属性在默认情况下，是让计数器自增1，但也可以这样同时创建多个计数器，并赋予不同的自增减值：&lt;br&gt;&lt;figure class=&quot;highlight css&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;gutter&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;1&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;2&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;comment&quot;&gt;/* 名为 my-counter 的计数器每次计数时，自增2；名为 your-counter 的计数器每次计数时，自增1；名为 his-counter 的计数器每次计数时，自减1。 */&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;selector-tag&quot;&gt;counter-increment&lt;/span&gt;: &lt;span class=&quot;selector-tag&quot;&gt;my-counter&lt;/span&gt; 2 &lt;span class=&quot;selector-tag&quot;&gt;your-counter&lt;/span&gt; &lt;span class=&quot;selector-tag&quot;&gt;his-counter&lt;/span&gt; &lt;span class=&quot;selector-tag&quot;&gt;-1&lt;/span&gt;;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;&lt;/p&gt;
&lt;p&gt;而关于&lt;code&gt;counters&lt;/code&gt;和嵌套的计数器，MDN 的&lt;a href=&quot;https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Counters#Nesting_counters&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;这个 Demo&lt;/a&gt;已经讲得非常清楚了，我就不多说了…&lt;/p&gt;
&lt;p&gt;关于计数所显示的“数字”，默认情况下是阿拉伯数字，可以将&lt;code&gt;counter(counter-name,style)&lt;/code&gt;或&lt;code&gt;counters(counter-name,string,style)&lt;/code&gt;中的 style 换成&lt;code&gt;list-style-type&lt;/code&gt;所允许的任意值，只是在 counters 中，修改一个 style，所有的字符都会跟着变…可以看一下&lt;a href=&quot;http://runjs.cn/code/vfywogpr&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;这个 Demo&lt;/a&gt;。&lt;/p&gt;
&lt;p&gt;PS，&lt;code&gt;display:none&lt;/code&gt;的元素不会增加计数，而&lt;code&gt;visibility:hidden&lt;/code&gt;的元素可以，这个跟&lt;code&gt;display&lt;/code&gt;和&lt;code&gt;visibility&lt;/code&gt;这两个属性本身的特性有关啦。&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;CSS 作为一系列标准的集合也在不断更新和完善，当初标准的制定者大概怎么也没想到，伪元素居然被用在了那么多猎奇的地方上，而现在以我的目光来看，那些原本的用途反而变成了猎奇的存在 XD&lt;/p&gt;
</content>
    
    <summary type="html">
    
      &lt;p&gt;伪元素就是在 CSS 文件中选中的，实际上是不存在在 DOM 中的元素，早在 CSS1 的方案中就提出了&lt;code&gt;:first-letter&lt;/code&gt;和&lt;code&gt;:first-line&lt;/code&gt;这两个伪元素（也就是说 IE5.5 这种史前怪兽也可以做首字下沉和首行特效…），在CSS2中则添加了&lt;code&gt;:before&lt;/code&gt;和&lt;code&gt;:after&lt;/code&gt;伪元素，在CSS3中，为了区别伪元素与伪类，则让伪元素使用&lt;code&gt;::&lt;/code&gt;作为前缀（IE从 IE9 开始支持 :: 伪元素）。&lt;/p&gt;
&lt;p&gt;&lt;code&gt;:before&lt;/code&gt;和&lt;code&gt;:after&lt;/code&gt;这对好兄妹在初登场的时候使用得并不频繁，因为根据 CSS2.1 的描述，它们是用来显示那些作者不希望出现在文档树中，可以让浏览器自动生成的内容：&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;In some cases, authors may want user agents to render content that does not come from the document tree. One familiar example of this is a numbered list; the author does not want to list the numbers explicitly, he or she wants the user agent to generate them automatically. Similarly, authors may want the user agent to insert the word “Figure” before the caption of a figure, or “Chapter 7” before the seventh chapter title. For audio or braille in particular, user agents should be able to insert these strings.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;后来的人们把这些棒棒的 idea 全部弃之不用，反之利用它的特性来完成很多黑科技手法：其主要用法之一是让它们充当 clear fix （清除浮动）以及避免 margin collapse （margin合并）的元素，从而保持干净整洁的 DOM 文档树。另外还有使用伪元素来做 icon （Bootstrap 所使用的 Font Awesome 以及现在绝大多数 @font-face 做 icon 的基本上都是这么做）。后来伴随着 CSS3 所支持的更多效果，慢慢就出现了一些丧病的 绘图，开始看到的是&lt;a href=&quot;http://tympanus.net/Tutorials/CSSButtonsPseudoElements/index3.html&quot;&gt;像这样&lt;/a&gt;的伪 3D 特效，然后代码死宅们还放出了 &lt;a href=&quot;http://one-div.com/&quot;&gt;One div&lt;/a&gt; 这种实用奇特小 icon 和 &lt;a href=&quot;http://a.singlediv.com/&quot;&gt;A Single Div&lt;/a&gt; 这种明显就是炫技的作品……&lt;/p&gt;
&lt;p&gt;各种情况表明现在这对好兄妹完全是肆无忌惮的泛滥状态，但上面举例这些却只是神奇伪元素的一部分用法——&lt;code&gt;content&lt;/code&gt;属性值为字符串或空，从当时来看（乃至现在来看），根本都属于黑科技的一类。但其实伪元素&lt;code&gt;:before&lt;/code&gt;和&lt;code&gt;:after&lt;/code&gt;还有很多其他可选的属性值…而且那才是人家被创造出来的本意啊！！！&lt;br&gt;
    
    </summary>
    
    
      <category term="CSS" scheme="http://hikarievo.me/tags/CSS/"/>
    
  </entry>
  
  <entry>
    <title>当我谈论工作时我谈论什么</title>
    <link href="http://hikarievo.me/2015/02/18/what-i-talk-about-when-i-talk-about-employment/"/>
    <id>http://hikarievo.me/2015/02/18/what-i-talk-about-when-i-talk-about-employment/</id>
    <published>2015-02-18T03:45:07.000Z</published>
    <updated>2015-03-15T16:58:09.653Z</updated>
    
    <content type="html">&lt;p&gt;接近一个月没写东西…是因为我在忙着跳槽，跳槽这件事本身并不耗费精力，但来回扯皮真的是人生一大经验，感觉自己瞬间萌萌哒 Level UP！了。回过头来想谈谈工作的事，主要是因为原单位是一家小公司，为了找人接手工作我只好硬着头皮当了一回面试官（上一次当面试官是在大学学生会面新人小伙伴的时候…），之前也看过一些向毕业生介绍如何求职的文章，发现那些文章和实际需求果然还是有差异……小公司的过法，其实很有趣。&lt;br&gt;&lt;a id=&quot;more&quot;&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;我原单位是家小公司，加上老板所有员工不超过30人，而且并不是 IT 行业的。老板选人看人的眼光很精准，对自己的需求也很明确，我总结归纳起来就四个字：便宜，好使。其实大概所有小公司都是这样的心情…基于这样的理由，来我们公司面试的大都是想要换行业的或者是刚准备来北京发展的人，作品拿来一看就知道估计是同一个老师教出来的（兴许还是同一期培训班毕业的？）。北京是一个不缺人的地方，手上一点筹码都没有就想进大厂？梦话还是睡了再说吧。对于无经验无想法的社招狗来说，大型公司真的不是想进就能进的，这种非 IT 的小公司的网络部门不失为一个不错的跳板。&lt;/p&gt;
&lt;p&gt;话又说回来，并不是说培训班出来的人就只能趴在小公司里，我一个朋友毕业后参加了集中培训班，培训毕业后投了3个月的简历，最终被心仪的公司带走。那家公司当时规模也不算小，而且去年刚刚上市，只是当时收她的价格在同行业里也算是可怜，但这不影响她现在一帆风顺走向人生巅峰。如果你一开始就目标明确信念坚定，不计较其他任何，那总会有好机会的。而那些无经验无能力无想法一上来就开高价的朋友，我只想问你们是觉得这世界土豪太多还是你觉得自己真值这个价？&lt;/p&gt;
&lt;p&gt;公司规模小必然涉及到另外一个问题，是不是有小伙伴，比如我原公司，确实就我一个人，要从设计管到前端，这种活很多人都不爱干。稍微好一点的公司，会把设计和前端分开，但是很有可能，你还是没有小伙伴（做设计的一个人默默做设计，跟产品和前端扯皮；做前端的一个人默默做前端，跟设计和后台斗嘴）。这个问题我倒觉得，不那么重要，谁都希望能够教学相长，但谁知道自己遇到的是良师益友，还是猪一样的队友。&lt;/p&gt;
&lt;p&gt;这样大大小小也只是粗略的分法，还有什么创业型公司成长型公司，而在这个超级浮躁的行业里，什么奇葩的事都不奇怪。曾经听说某公司招了一个应届生做设计，月薪自然是比大部分电商设计师要高些，结果人家做出来东西惨不忍睹，于是公司出资送他去上海培训，路费食宿全包，这样回来还是做得狗屎一般，公司居然还在犹豫要不要开除这人…我只问了朋友说这么好的事为什么没让我赶上……所以想了这么多琢磨了这么多，其实有用的没太多，简单点说，忙的相对就多金一点，闲的相对就寡淡点，小公司抠门的多一点，机会也会多一点。行业什么的看个人，传统互联网也好游戏公司也好还是什么奇奇怪怪的公司也好，现在流行互联网思维，就差炼钢厂也开个网站唱yoyoyo，到处都在要人，往人傻钱多的地方挤就不会错了。&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;后半段想吐槽一下公司想要什么，不在那个位子上其实很难考虑到这个问题，之前看《Burn Your Portfolio》的时候里面有一章也谈到过这个问题，有的时候公司可能因为别人的问题开除你，因为公司有公司的考量。站在公司的角度上来说，其实他不想开除任何人（黑心老板和放羊员工除外…），但是很多时候境况并不允许：也许是成本难以控制，也许是团队意见不一致到难以为继等等……结果是你倒霉了，而你却不知道为什么。&lt;/p&gt;
&lt;p&gt;而公司在招人的时候，首先肯定是要找一个能够胜任工作的人，这一环基本上就是在看专业能力。你不要说什么来学习的，公司又不是搞慈善的凭什么花钱让你在这学（前面例子里那个一定是慈善公司…）；另外一方面也不要太逞强，你行不行，其实你说了不算，姜还是老的辣这句话，一定时刻铭记在心，瞎逞能除了给面试官留下一个坏印象，别的什么都做不到。而我上面刚好说了，来我们公司面试的几乎都是培训班培训出来的，说实话几乎一点实战能力都没有，胜任什么的自然很是遥远，而这种人就不考虑了吗？&lt;/p&gt;
&lt;p&gt;答案当然是，绝不会一竿子打死。其次这点我觉得可能反而比第一点更重要，学习能力，或者简单来说是解决问题的能力。我没法指望你一来就能完美担当所有的工作，但我要确认你拥有在有限时间里承担起工作的能力。这和来学习什么的并不太矛盾，要工作，然后要学习。在这个资讯爆炸的时代，紧跟时代是一件辛苦而又不得不做的事，因为我们就处在时代的风口浪尖上，一个没站稳可能就被拍水里了。对本职工作的热爱或者责任心，如何理解所要从事的工作，如何规划自己的将来，这些老生常谈的问题真的确实是直指核心的。当然其实问题的答案，并不一定是你用嘴说出来的，神情、语气、眼神、动作，早就出卖了你的真心。总之如果你只是因为人傻钱多而来，就展现出点能让傻子交钱的能力吧。&lt;/p&gt;
&lt;p&gt;最后一道关卡通常是HR，说实话我可不喜欢HR…他们除了跟你砍价之外什么都不会干！在HR面前要展现的大概就是我便宜又能干捡到我是你们公司福气所以价格就这样吧再砍价我要生气了(╯‵□′)╯︵┻━┻ 这样。&lt;/p&gt;
</content>
    
    <summary type="html">
    
      &lt;p&gt;接近一个月没写东西…是因为我在忙着跳槽，跳槽这件事本身并不耗费精力，但来回扯皮真的是人生一大经验，感觉自己瞬间萌萌哒 Level UP！了。回过头来想谈谈工作的事，主要是因为原单位是一家小公司，为了找人接手工作我只好硬着头皮当了一回面试官（上一次当面试官是在大学学生会面新人小伙伴的时候…），之前也看过一些向毕业生介绍如何求职的文章，发现那些文章和实际需求果然还是有差异……小公司的过法，其实很有趣。&lt;br&gt;
    
    </summary>
    
    
      <category term="杂谈" scheme="http://hikarievo.me/tags/%E6%9D%82%E8%B0%88/"/>
    
  </entry>
  
  <entry>
    <title>《用户体验要素》读后</title>
    <link href="http://hikarievo.me/2015/01/21/impression-of-elements-of-UX/"/>
    <id>http://hikarievo.me/2015/01/21/impression-of-elements-of-UX/</id>
    <published>2015-01-21T12:50:59.000Z</published>
    <updated>2015-01-21T15:38:45.409Z</updated>
    
    <content type="html">&lt;p&gt;Jesse James Garrett的&lt;a href=&quot;http://book.douban.com/subject/6523997/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;《用户体验要素：以用户为中心的产品设计》&lt;/a&gt;（The Elements of User Experience: User-Centered Design for the Web and Beyond，Second Edition）大概是UX入门的必读作品了，前阵子在整理资料的时候顺手把这张图汉化了：&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;http://ww1.sinaimg.cn/large/67020811gw1enn7r7twe5j20uo0njtgy.jpg&quot; alt=&quot;用户体验要素&quot;&gt;&lt;/p&gt;
&lt;p&gt;这张图就是出自这本书，也是这本书内容的主要纲领，纲领都做了，顺带看一下原文也是情理之中。书本身的内容比我想象中要简明，在我最初了解 UX 的时候，我一直觉得这是一件不言自明的事情，在看过这本书之后，才发现领域的不同带来的鸿沟竟是如此巨大：对于一把椅子来说，其功能性与用户体验是密不可分的，没有良好的体验的椅子，其功能性几乎无从谈起，而对于互联网产品而言，功能与体验的相关性就没那么强（尤其在功能大量同质化的今天，产品体验反而成为了成败的关键）。&lt;/p&gt;
&lt;p&gt;现在 UX 或者 UCD 已经成为一个流行词汇，就像前两年（乃至现在仍在）流行的“互联网思维”，老板们开始试着重视这些东西是因为它们确实能带来更高的效益。虽然四处都在招 UX Designer，但我更倾向于另一种说法，UX 是无法“被设计”的，用户所有的体验，都应当是顺理成章理所当然清晰明了的，我们只能顺着这些“理”，围绕目标用户的基本特质去设计我们的产品。&lt;/p&gt;
&lt;p&gt;书里试图将“作为信息系统的网站”和“作为软件界面的网站”融合起来，其实作为中国互联网的年轻一代或者大多数，很少有经历过单纯“作为信息系统的网站”的时代，我接触互联网的时候，中国互联网已经有了三大门户，各种工具不一而足。我一直以为只要目标明确、手段清晰、技巧得当，最终产品总不会太糟糕，因而在我看来，这本书可能其实是在讲产品经理在做的事——开发产品的流程（难怪豆瓣用户都喜欢把这本书丢进产品经理的书单里）。&lt;/p&gt;
&lt;p&gt;为何用户体验要贯穿产品开发的始终，在本书中所提到的第一个层面，战略层，其所指与网站的功能或内容都毫不相干，然而却在潜移默化中影响着最终的功能形态和内容构成。诚如书最后所言，产品的开发过程应该更类似于马拉松，而不是一个一个阶段的短跑冲刺。如果产品最终的流程如丝般顺滑，用户在任何一个角落都可以轻松找到自己想要的内容而欢欣鼓舞，那么这个产品的基础，也就是其战略目标，一定是清晰的。而就算瞎猫碰上死耗子，漫无目的的产品仍旧产出了良好的体验，要么你可能需要回头修改你的战略，要么就很有可能有更大的潜藏的问题（比如用户喜欢，你却得不到盈利？）&lt;/p&gt;
&lt;h2 id=&quot;用户体验要素的分层&quot;&gt;&lt;a href=&quot;#用户体验要素的分层&quot; class=&quot;headerlink&quot; title=&quot;用户体验要素的分层&quot;&gt;&lt;/a&gt;用户体验要素的分层&lt;/h2&gt;&lt;p&gt;&lt;img src=&quot;http://ww1.sinaimg.cn/large/67020811gw1enls6de9ugj212o0qqwkh.jpg&quot; alt=&quot;用户体验要素分层模型&quot;&gt;&lt;/p&gt;
&lt;p&gt;这张图是上面那张图的纲领形态，五个层面对应五层所需的行动。虽然作者将产品开发流程分为5个层面的行动，但这5个层面并非彼此割裂孤立的，向上反馈是必要且重要的，及时修正上一层面操作中所出现的问题，可以为将来的发展铺垫得更好。&lt;/p&gt;
&lt;h3 id=&quot;战略层&quot;&gt;&lt;a href=&quot;#战略层&quot; class=&quot;headerlink&quot; title=&quot;战略层&quot;&gt;&lt;/a&gt;战略层&lt;/h3&gt;&lt;p&gt;研究思考产品为何而生，于人于己的意义何在？品牌形象如何融入？用户细分及用户研究，并撰写战略文档都是此阶段要做的事情。&lt;/p&gt;
&lt;p&gt;公司开发一个产品，肯定是为了赚钱或者省钱，个人开发某个产品也许只是为了自己爽，而赚钱或省钱的方式各有千秋，每个人G点也不同，所以产品目标应该是基于双方（开发者及使用者）需求提出的，找到需求点，提出问题及解决方案。&lt;/p&gt;
&lt;p&gt;而这也就势必牵涉到对用户的分析，目标用户群体是怎样的，他们的年龄段，对互联网的使用习惯，生活习惯，人生三观，以及针对产品的一些特殊需求等等，通过不同的手段将用户分成不同类别。然后就是对这些用户群体的研究，可以是通过他人已经完成的研究成果，也可以自己去做。我不太喜欢调查问卷（因为我自己本身就是一个习惯性问卷作弊者…），实际的操作记录及用户测试相对更加可靠，最终根据测试和调研结果，虚构若干个“使用者”，将具有代表性的需求分配给这些“使用者”，这样产品出产会更加顺利。&lt;/p&gt;
&lt;p&gt;而对于开发者而言，开发产品的目的大抵是明确的（假装他是明确的，不明确的不要做了趁早洗洗睡吧），这里需要额外思考的是品牌形象的整合，与如何将一整套战略完整地传达给团队中的每一个人，毕竟就算制定了策略，最终的实施者却是实际开发的团队成员，倘若他们不知道策略如何，谈何实施。最后应该是成功标准，有了目标，就要有是否达成目标的标准，倘若不是转化率注册率之类的数字，访问量停留时间这样的指标也可以。&lt;/p&gt;
&lt;h3 id=&quot;范围层&quot;&gt;&lt;a href=&quot;#范围层&quot; class=&quot;headerlink&quot; title=&quot;范围层&quot;&gt;&lt;/a&gt;范围层&lt;/h3&gt;&lt;p&gt;需求定义。&lt;/p&gt;
&lt;p&gt;之前根据用户需求提出了产品目标，现在则是根据产品目标提产品需求：内容和功能上的。为了满足用户以及我们的种种需求，这个产品需要囊括哪些内容，需要建立哪些功能，这些功能又需要哪些内容，这些内容又需要哪些功能来支撑。所以其实我不太懂把功能和内容割裂思考的方式，它们本来就是水乳交融。&lt;/p&gt;
&lt;p&gt;所有的需求都要写下来，并且尽量避免抽象（最受欢迎）、主观（高大上）或者略语（等等），这些需求应该是可以确定是否已经满足的，像“时尚时尚最时尚”这种表述，鬼知道什么产品能满足。内容需求则应该涉及到文字、图像、影音文件的相关数量及更新频率等等，并且根据使用者的不同区分出不同的内容需求。&lt;/p&gt;
&lt;p&gt;最后确认这些需求的优先级，以及它们跟战略目标之间的关系，如果某个功能或内容需求无法满足战略目标，那就要思考是哪边的问题，并及时修正（删掉这个需求，或者修改战略）。&lt;/p&gt;
&lt;h3 id=&quot;结构层&quot;&gt;&lt;a href=&quot;#结构层&quot; class=&quot;headerlink&quot; title=&quot;结构层&quot;&gt;&lt;/a&gt;结构层&lt;/h3&gt;&lt;p&gt;交互设计与信息架构。&lt;/p&gt;
&lt;p&gt;这俩都是术语，也已经自成学科。对于交互设计来说，产品功能通过怎样的流程行进，如何能满足用户潜意识下的反应，通过隐喻或者其他方式让用户减少思考，令其能够凭直觉使用网站的功能，并通过各种方式减少用户犯错的机会，及其所造成的挫败感（及时纠错），大抵就是交互设计在做的事。这里包含了各种各样的模式，比如：当人们填写完查询表单并点击提交的时候，希望看到的是查询结果而非广告或注册窗口。&lt;/p&gt;
&lt;p&gt;信息架构是网站内容的分类管理，这些内容的分类可以根据战略层的产品目标逐一细分需求得到，也可以通过范围层的内容需求进行分类整合，最好的做法是二者配合进行，最终令细分下来的内容符合内容需求，整合出的内容符合战略需求。一个适应性强的信息架构系统，是有极强的扩展和统合能力的，如果很好奇这部分内容的话，我觉得去给 wiki 做页面分类是个不错的选择…内容整合或细分的困难点就在于如何留下足够的弹性空间去容纳新的部分而不破坏原本整体的架构，以及根据新的需求重新定义分类或增加分类方式。这些所有的信息分类组合，都要建立在前面所描述的需求及目标之上，能够预知用户的期望并将其纳入设计。&lt;/p&gt;
&lt;p&gt;在这个部分作者提到了网站架构图——记录网站页面或文件的群集、独立以及彼此之间的关系，在他的官网上有一份文档描述&lt;a href=&quot;http://www.jjg.net/ia/visvocab/chinese.html&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;如何制作架构图&lt;/a&gt;，现在可能叫 User Interface Flow 的也有。名字和形态都不重要，这份图表的最重要目的是将之前所有抽象的工作转化成可操作的具体的事项，因为接下来，开发流程就要进入到一个完全具象化的世界里。&lt;/p&gt;
&lt;h3 id=&quot;框架层&quot;&gt;&lt;a href=&quot;#框架层&quot; class=&quot;headerlink&quot; title=&quot;框架层&quot;&gt;&lt;/a&gt;框架层&lt;/h3&gt;&lt;p&gt;线框图来了。&lt;/p&gt;
&lt;p&gt;让界面与用户的习惯一致，让对的东西出现在对的位置上，使用对的元素传达对的信息（突出该突出的，让按钮成为按钮）。让用户有能力在页面之间跳转——有意识的或者是无意识的，应该至少提供一种方法。把信息分类组合，提供给界面和功能。把这些内容全部组合在一起，使用线框图来呈现最终的结果。&lt;/p&gt;
&lt;h3 id=&quot;表现层&quot;&gt;&lt;a href=&quot;#表现层&quot; class=&quot;headerlink&quot; title=&quot;表现层&quot;&gt;&lt;/a&gt;表现层&lt;/h3&gt;&lt;p&gt;把线框图与美学合二为一，传统的设计学终于登场。&lt;/p&gt;
&lt;p&gt;使用多种感知方式，保证对比和一致性，做好配色和排版。如果需要的话，可能还要产出一份视觉 guideline，用于维护品牌一致性，并能够为后继者提供足够的参考资料。&lt;/p&gt;
&lt;h2 id=&quot;用户体验要素的取舍&quot;&gt;&lt;a href=&quot;#用户体验要素的取舍&quot; class=&quot;headerlink&quot; title=&quot;用户体验要素的取舍&quot;&gt;&lt;/a&gt;用户体验要素的取舍&lt;/h2&gt;&lt;p&gt;开头就说了这本书近乎于在讲产品开发的流程，但是谁都知道能够完整完成这套流程的团队凤毛麟角，那么是否就应该抛弃某些没有实质性产出的部分呢……？&lt;/p&gt;
&lt;p&gt;答案当然是否。在产品的开发设计过程中，所遇到的问题和奇怪的意见，只要拿来和目标与需求比对，就基本都能够搞清楚是否采纳或者如何反驳。所以产品的目标与需求可以一步完成，需求与架构可以同步完善，甚至把线框也一起囊括，但总的来说，这些步骤所描述的具体内容都应该逐步完成，这样才能最大限度地避免各种潜在问题。&lt;/p&gt;
</content>
    
    <summary type="html">
    
      &lt;p&gt;Jesse James Garrett的&lt;a href=&quot;http://book.douban.com/subject/6523997/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;《用户体验要素：以用户为中心的产品设计》&lt;/a&gt;（The Element
    
    </summary>
    
    
      <category term="看书" scheme="http://hikarievo.me/tags/%E7%9C%8B%E4%B9%A6/"/>
    
  </entry>
  
  <entry>
    <title>荐书《为什么他接的案子比我多》</title>
    <link href="http://hikarievo.me/2015/01/03/impression-of-burn-your-portfolio/"/>
    <id>http://hikarievo.me/2015/01/03/impression-of-burn-your-portfolio/</id>
    <published>2015-01-03T03:33:36.000Z</published>
    <updated>2015-01-03T05:23:06.555Z</updated>
    
    <content type="html">&lt;p&gt;这两天出去一趟终于得空把lee姐安利了很久的&lt;a href=&quot;http://book.douban.com/subject/26171081/&quot; title=&quot;豆瓣介绍&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;书&lt;/a&gt;看完了，据说当时火爆到博客来断货什么的。目前这本书还没有简中版，繁中的名字叫《為什麼他接的案子比我多——設計業界潛規則，讓你接案上班都無往不利》，看下来以后觉得…嗯果然除了内容，这本书繁中版的书名翻译以及装帧简直逊到爆，这要放在国内书店里也绝对是斜眼不带瞟一下的，糟蹋了糟蹋了。&lt;/p&gt;
&lt;p&gt;这本书其实是在讲在设计技巧之外的，设计师所需要的人际交往、团队合作、项目管理等方面的注意事项，可以说是专门为设计师及设计从业者撰写的成功学指南…虽然说我个人是很厌恶成功学的，但是这本书的脚踏实地的风格和翔实的示例还是非常加分的 XD&lt;/p&gt;
&lt;h2 id=&quot;个人素养&quot;&gt;&lt;a href=&quot;#个人素养&quot; class=&quot;headerlink&quot; title=&quot;个人素养&quot;&gt;&lt;/a&gt;个人素养&lt;/h2&gt;&lt;p&gt;低调、谦逊、上进、友好、善良等等这些特质，其实放在任何职业任何行业都非常适用而且从不过时，然而设计师多少都有点特殊的问题，有一些是来自于其自身艺术性特质所导致的随意、自我，另一些则是被低智商客户折磨出来的暴戾，没耐性…&lt;/p&gt;
&lt;p&gt;对于前者其实没什么好说的，看看卡耐基的《人性的弱点》可能更有用。对于后者，书中也提出了很多解决方法，包括看到苗头不对就快跑；所有的设计范围改动和费用变更都需要落实在书面上；永远把客户当作不在状况的人，提出切实而具体的行动方案和计划等等。这些并不是双方的素养有什么问题（虽然结果上会变成设计师的高傲自负或者客户的白痴无能），而是交流出了问题。&lt;/p&gt;
&lt;h2 id=&quot;人际交往&quot;&gt;&lt;a href=&quot;#人际交往&quot; class=&quot;headerlink&quot; title=&quot;人际交往&quot;&gt;&lt;/a&gt;人际交往&lt;/h2&gt;&lt;p&gt;还是要先推一下卡耐基的《人性的弱点》，作者在正文第的第一章第一节就指出他最爱的书是这本，并且自己都记不清送出过多少本…我个人也是在几年前被一位好友硬塞来的，现在想想真的后悔当时的自己在人际交往上是有多糟糕（虽然现在好像也没进步太多……）。&lt;/p&gt;
&lt;p&gt;《为什么》这本书中所述的交往技巧包括了如何与客户就项目进行沟通，如何维系自己与客户之间的关系，以及这种维系的重要性。&lt;/p&gt;
&lt;p&gt;项目沟通涵盖了从项目启动到进行过程中的大事小情，从一开始商榷好项目范围以及报价并开始推进项目进程，时刻与客户保持沟通，告知项目的进展及客户可以参与的具体事项，在项目遇到问题的时候采用何种措辞通知客户共同采取措施，以确保项目可以如期完工。&lt;/p&gt;
&lt;p&gt;这本书的细微之处，是把这些沟通的邮件范本都列出来了………简直不能更贴心。值得注意的是，繁中版的很多措辞是使用的台湾国语，直接拿来给国内用实在不太符合国情，在措辞方面我个人比较推崇另一本书——《谦词敬词婉词词典》，这本是把现代汉语里有可能用到的谦词敬词全都拖出来单列了，作为工具书来说相当合适。当然谦词敬词也只能算是一部分，其实更多的还是看邮件整体的行文，毕竟在原文英文中，可是连“您”和“你”都不分的，谦逊与敬意也并非一两个字就能表达。&lt;/p&gt;
&lt;p&gt;至于关系，只能说人天性如此，记得当时 guanxi 一词成功打入西方市场的时候，还引起了不小的骚动。逢年过节给人送点礼，人家当然不那么容易忘了你，维系好关系也会对将来的事业有更好的帮助。虽然现在有个更高端的词叫人脉，不过我觉得它们本质上没有太大的不同，只是把“关系”当中的私交稍稍减淡一些。项目给熟人，这本来就是顺理成章的事情。&lt;/p&gt;
&lt;p&gt;作为乙方，服务好甲方让他开开心心掏钱永远是我们最终极的使命。&lt;/p&gt;
&lt;h2 id=&quot;团队合作与项目管理&quot;&gt;&lt;a href=&quot;#团队合作与项目管理&quot; class=&quot;headerlink&quot; title=&quot;团队合作与项目管理&quot;&gt;&lt;/a&gt;团队合作与项目管理&lt;/h2&gt;&lt;p&gt;书里简单提到了团队合作的重要性，这种事情不言而喻。我觉得有趣的是另一个观点，团队有团队的考量。大概意思就是说团队中A犯的错误，有可能导致B丢了饭碗，这是基于整个公司团队的考虑，而并非仅仅关乎个人，既然处在一个命运共同体中，做好自己份内的事就是不给他人添麻烦了。&lt;/p&gt;
&lt;p&gt;而作为项目的领导者，如何管控项目进程就是防止出现上述问题的最大保障。这里包括了如何列清单，在项目的每个阶段都要做些什么，出了问题要怎么办。我觉得他的项目推进清单简直细致到无以复加，虽然在不同的开发项目上也有可能会遭人耻笑（这么一套流程跑下来投资人早跑光光），但是了解流程并尽可能照章执行是最不容易出问题的，就算出了问题也是最容易弥补和变更的，毕竟这都是前人的经验。&lt;/p&gt;
&lt;p&gt;书里还额外提到了关于预算和报价的问题，虽然我是不用操心这种事啦（打工仔有打工仔的好），而且在国内环境下，按工时报价算是非常奢侈的行为，所以预算和报价的问题看看就好（看看老外怎么做就好）。&lt;/p&gt;
&lt;h2 id=&quot;其他&quot;&gt;&lt;a href=&quot;#其他&quot; class=&quot;headerlink&quot; title=&quot;其他&quot;&gt;&lt;/a&gt;其他&lt;/h2&gt;&lt;p&gt;林林总总写了这么多其实好像书籍介绍，除了我上面提到的那些，书里还写了很多更加细节的内容，可以算得上是超级翔实设计师业内生存手册了。&lt;/p&gt;
&lt;p&gt;感谢衣食父母 XDD&lt;/p&gt;
</content>
    
    <summary type="html">
    
      &lt;p&gt;这两天出去一趟终于得空把lee姐安利了很久的&lt;a href=&quot;http://book.douban.com/subject/26171081/&quot; title=&quot;豆瓣介绍&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;书&lt;/a&gt;看完了，据说当时火爆到博客来断
    
    </summary>
    
    
      <category term="看书" scheme="http://hikarievo.me/tags/%E7%9C%8B%E4%B9%A6/"/>
    
  </entry>
  
  <entry>
    <title>关于二维码设计的那点事</title>
    <link href="http://hikarievo.me/2014/12/20/things-about-QRcode-design/"/>
    <id>http://hikarievo.me/2014/12/20/things-about-QRcode-design/</id>
    <published>2014-12-20T11:25:45.000Z</published>
    <updated>2014-12-22T12:37:25.610Z</updated>
    
    <content type="html">&lt;p&gt;二维码在中国火起来基本上全靠微信，这种信息存储方式可以保存比条形码多得多的信息，因此在国内通常用于链接地址的收发。在而在平面及网页设计中，设计师们在面对这种由黑白小方块组成的难以处理的图片，几乎不知该从何下手，直接 pia 在作品上又如膏药一般，难以驾驭。&lt;/p&gt;
&lt;p&gt;而网上最近也在各种盛传经过精心设计的二维码，很多人也对设计二维码充满了兴趣。之前在做传单的时候刚好涉及到这部分的内容，顺手搜了很多资料并稍微整理了一下。&lt;/p&gt;
&lt;h2 id=&quot;关于二维码&quot;&gt;&lt;a href=&quot;#关于二维码&quot; class=&quot;headerlink&quot; title=&quot;关于二维码&quot;&gt;&lt;/a&gt;关于二维码&lt;/h2&gt;&lt;p&gt;二维码其实是是个统称，如果各位坐过飞机，在飞机的登机牌上也会有一块用于扫描的长方形区域，那是在上世纪九十年代初就出现的，被称作 PDF417 格式的二维码，现在广泛应用于航空及物流行业中。而我们现在更常见到的，也是本文主要探讨的，是由日本 &lt;a href=&quot;http://www.qrcode.com/zh/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;DENSO WAVE 公司&lt;/a&gt;在 1994 年发明的 QR 码（全称为快速响应矩阵码；英语：Quick Response Code），QR 码由 DENSO WAVE 公司持有专利，但开放标准，不行使专利权，也就是说，任意人或组织，都可以随意使用 QR 码这一标准专利而无需向其专利拥有者提出申请。&lt;/p&gt;
&lt;p&gt;关于对二维码进行设计及再次创作，其公司是这么指出的&lt;/p&gt;
&lt;blockquote&gt;&lt;p&gt;在QR码上重叠插图或加以设计变形，就需要利用QR码的纠错功能进行读取，而有时会因为一点污痕或缺失而无法读取，或者读取速度变慢，对此需要引以注意。&lt;br&gt;为了确保稳定的读取，还是建议遵从根据JIS、ISO的规格制定的内容加以利用。&lt;br&gt;而且，在QR码上重叠插图或加入设计与QR码的规格不符，有可能无法形成QR码。&lt;br&gt;DENSO WAVE INCORPORATED不行使专利权仅限于符合JIS、ISO规格的QR码，那些与规格不符的QR码不在此列，因而DENSO WAVE INCORPORATED有可能会行使专利权。 若考虑在QR码上重叠插图或施加设计的使用方法，请事先与DENSO WAVE INCORPORATED洽谈。&lt;/p&gt;
&lt;footer&gt;&lt;strong&gt;DENSO WAVE&lt;/strong&gt;&lt;cite&gt;&lt;a href=&quot;http://www.qrcode.com/zh/faq.html&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;上色及放入插图这种使用方法会有问题吗？&lt;/a&gt;&lt;/cite&gt;&lt;/footer&gt;&lt;/blockquote&gt;
&lt;p&gt;这段话大概意思就是说，对 QR 码进行设计的时候，有可能导致 QR 码无法被正常读取，而与此同时，对 QR 码的设计行为有可能会导致 DENSO WAVE 来查水表 XDD 当然这也只能算是官话，因为在他们公司的另外一段文章中，其发明者也提到&lt;/p&gt;
&lt;blockquote&gt;&lt;p&gt;原昌宏表示：“黑白两色的码对人们来说已经习以为常，我希望制作出更为漂亮、能给人们带来惊喜的QR码”。&lt;/p&gt;
&lt;footer&gt;&lt;strong&gt;DENSO WAVE&lt;/strong&gt;&lt;cite&gt;&lt;a href=&quot;http://www.qrcode.com/zh/history/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;www.qrcode.com/zh/history&lt;/a&gt;&lt;/cite&gt;&lt;/footer&gt;&lt;/blockquote&gt;
&lt;p&gt;所以其实 DENSO WAVE 是鼓励用户对 QR 码进行设计的，毕竟这样也可以更好地推广 QR 码嘛 XDD&lt;/p&gt;
&lt;p&gt;QR 码具有一定的纠错能力，根据选择，其纠错范围可以从 7% 到 30%。这里所指出的“纠错”，意味着 QR 码的“污损面积”（包括划痕、污迹、破损乃至扫描设备对 QR 码图案造成的模糊情况等等）不足上述面积的时候，QR 码读取设备仍有&lt;strong&gt;有可能&lt;/strong&gt;读取，现今所有的对 QR 码的设计都是基于这一原理，然而值得注意的是，如果关键部位有污损（如定位部分），那么这个污损面积只占了不足5%，也有可能导致内容无法读取。&lt;/p&gt;
&lt;h2 id=&quot;QR-码的基本规格&quot;&gt;&lt;a href=&quot;#QR-码的基本规格&quot; class=&quot;headerlink&quot; title=&quot;QR 码的基本规格&quot;&gt;&lt;/a&gt;QR 码的基本规格&lt;/h2&gt;&lt;p&gt;QR 码的最小单位被称为&lt;strong&gt;码元&lt;/strong&gt;（一定是对岸友人翻译的），QR 码中的一个“小方块”就是一个码元。在电脑上，使用电脑识别软件进行直接识别的话，一像素一码元就可以了，然而，我们通常所见的 QR 码一般都是使用手机摄像头进行识别的，这样来说 1 像素的图案就太小了。对于印刷而言，可以打印出来的 QR 码的最小尺寸是 3.57 × 3.57 mm（一码元 4 点，折合 0.17mm，最小边长为 21 码元），对于显示屏来说，这样的大小还不到 1 像素一码元 XDDD。而关于最大尺寸，更加无限定，实际上码元越大，对于相机等设备来说越容易读取，只要这个 QR 码的大小不要超过相机的取景范围就好~因此其官网推荐的大小仅有“我们建议用户在打印范围内尽可能大地打印。”这样一句话而已╮(╯▽╰)╭&lt;/p&gt;
&lt;p&gt;码元必须是正方形的，如果在变形时让码元形状发生了变化，那就极有可能无法读取，在用 PS 处理 QR 码的时候需要格外注意。而 QR 码的信息参数如下图：&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;http://hikarievo.qiniudn.com/screenshot/QR_Code_Structure_Example_2_zh-hans.svg.png&quot; alt=&quot;维基百科的 QR 码结构示意图&quot;&gt;&lt;/p&gt;
&lt;p&gt;三个定位标志和一个校正标志（图中未上色的部分）是最重要的区域，这些部位破损严重的话，设备就根本无法读取其内容。另外值得一提的是绿色的“静态区域”，其官网指出，QR 码的边缘&lt;strong&gt;必须留出 4 码元以上的空白&lt;/strong&gt;。这个规定，同样是为了便于软件读取，在设计时一定要格外注意（实际上还是蛮多地方不遵守的，微信貌似对没有静态区域的 QR 码也基本都能够顺利读取）。&lt;/p&gt;
&lt;h2 id=&quot;QR-码的设计要点&quot;&gt;&lt;a href=&quot;#QR-码的设计要点&quot; class=&quot;headerlink&quot; title=&quot;QR 码的设计要点&quot;&gt;&lt;/a&gt;QR 码的设计要点&lt;/h2&gt;&lt;p&gt;这里我所指处的设计要点，是指&lt;strong&gt;能够顺利被手机等设备读取&lt;/strong&gt;的要点，在 QR 码已经成为一种文化潮流的今天，不乏有艺术家对二维码进行各种艺术化创作，好看是非常好看啦，但是其功能性几乎都要消失殆尽了 ╮(╯▽╰)╭&lt;/p&gt;
&lt;h3 id=&quot;颜色&quot;&gt;&lt;a href=&quot;#颜色&quot; class=&quot;headerlink&quot; title=&quot;颜色&quot;&gt;&lt;/a&gt;颜色&lt;/h3&gt;&lt;p&gt;改变 QR 码的颜色，乃至改变 QR 码背景的颜色，都是可以的。然而根据读取软件算法的不同，有些做法相对安全：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;QR 码图案的颜色使用深色覆盖。QR 码背景的颜色使用浅色覆盖，并尽量令颜色柔和过度，避免颜色边缘。&lt;/li&gt;
&lt;li&gt;QR 码的图案与背景颜色有较强烈的明度对比。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;要格外注意的是&lt;strong&gt;不能使用反色对比&lt;/strong&gt;，默认情况下，QR 码的图案部分为黑色，在上色的时候，也应该让图案部分的颜色明度明显低于背景。有些人以为只要图案与背景形成对比即可，然而黑底白图案的 QR 码在绝大多数软件来看都是识别不了的……&lt;/p&gt;
&lt;h3 id=&quot;覆盖图案&quot;&gt;&lt;a href=&quot;#覆盖图案&quot; class=&quot;headerlink&quot; title=&quot;覆盖图案&quot;&gt;&lt;/a&gt;覆盖图案&lt;/h3&gt;&lt;p&gt;微信的做法就是在 QR 码中间覆盖上自己的 Logo 或头像，这种做法利用了 QR 码的容错能力。如果你是从运营或者其他人手上得到的这个 QR 码，应该将其视为容错率最低（7%）的那一款。比如一枚 25 × 25 码元的 QR 码，其面积的 7% 就是 43.75 码元，大约是 6 × 7 码元，你的 Logo 只要不大于这个面积，基本上是安全的。&lt;/p&gt;
&lt;p&gt;当然这也要看你 Logo 放置的位置，目前测试下来看，放在中间是最安全的，而放在校正标志附近容错能力较差，覆盖了定位标志则几乎全军覆没。&lt;/p&gt;
&lt;h3 id=&quot;周围装饰&quot;&gt;&lt;a href=&quot;#周围装饰&quot; class=&quot;headerlink&quot; title=&quot;周围装饰&quot;&gt;&lt;/a&gt;周围装饰&lt;/h3&gt;&lt;p&gt;很多 QR 码采取装饰周围空间的方式，令其构成一幅画面，这种做法与覆盖图案的区别仅在于“一个在 QR 码内部，一个在外部”而已。而外部装饰明显比破坏内部信息图案安全的多。&lt;/p&gt;
&lt;p&gt;重点在于官方提出的“静态区域”，它应该占有 4 码元的空间。而根据 QR 码的规格，只要有三个定位标志和一个校正标志，其实就足够软件划出这个 QR 码所处的空间了……唔前面也提到了很多地方并不遵守这一点，事实上因为静态区域过小而无法解码的情况，在我测试过的十几款（累积所有平台）应用里只有一两款，但这个区域不足确实会影响扫码速度。如果一定要在静态区域里添加装饰，更安全的做法是使用浅色，使用与图案形成明显明度对比的颜色。&lt;/p&gt;
&lt;h3 id=&quot;改变码元形状&quot;&gt;&lt;a href=&quot;#改变码元形状&quot; class=&quot;headerlink&quot; title=&quot;改变码元形状&quot;&gt;&lt;/a&gt;改变码元形状&lt;/h3&gt;&lt;p&gt;前面提到，码元是 QR 码的基本存储单位，而其形状一定要是正方形。现在有一些 QR 码在线生成网站，可以快速生成 QR 码，并可以把矩形的码元做成圆角矩形乃至圆形。艺术家也大都采取类似的手法，把 QR 码的图案转化成画面。这些能不能扫出来，完全，是看扫描软件的。&lt;/p&gt;
&lt;p&gt;虽然 QR 码的纠错能力相当强，但我可以比较肯定地说，上面这些做法都非常危险。我们在做 QR 码设计的时候尝试了几款自动生成工具所出的方案，测试了安卓 4.0、4.2、4.4 以及 iOS 6 和 7 下的微信（两个版本）、UC浏览器及其他几款扫码工具，没有一个异形码可以被全部软件识别，解码能力最强的微信，在面对定位标志异形的情况下也变得无法解码。&lt;/p&gt;
&lt;p&gt;根据实际情况，如果你的 QR 码是仅供微信使用，变形的程度可以相对大一些（相对较小的圆角是可以容忍的。在保持定位标志形状不变的前提下，QR 码图案可以做较大改动），如果你的 QR 码是一个网址，可以由任意工具扫描解码，那么请注意，不对其做变形处理才是上策。&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;上面说了那么多都是通常情况…我也遇到了，几乎解释不了的情况。&lt;/p&gt;
&lt;p&gt;一般来说 QR 码变形越严重，所需解码时间就越长，但是我在写本文的时候遇到了两枚 QR 码：&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;http://hikarievo.qiniudn.com/screenshot/qr_codedesign_vg.jpg&quot; alt=&quot;QR码设计&quot; title=&quot;梵高的QR码&quot;&gt;&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;http://hikarievo.qiniudn.com/screenshot/qr_code_design_barcelona_2.jpg&quot; alt=&quot;QR码设计&quot;&gt;&lt;/p&gt;
&lt;p&gt;这两款，应该是属于“无法解码”那个范畴的，而微信竟然给我秒扫了（当然手机里的其他工具仍旧扫描不能…）。这究竟是为什么，我也不得而知了╮(╯▽╰)╭&lt;/p&gt;
&lt;p&gt;【注】上面两款 QR 码均来自 google，侵删。&lt;/p&gt;
</content>
    
    <summary type="html">
    
      &lt;p&gt;二维码在中国火起来基本上全靠微信，这种信息存储方式可以保存比条形码多得多的信息，因此在国内通常用于链接地址的收发。在而在平面及网页设计中，设计师们在面对这种由黑白小方块组成的难以处理的图片，几乎不知该从何下手，直接 pia 在作品上又如膏药一般，难以驾驭。&lt;/p&gt;
&lt;p&gt;而
    
    </summary>
    
    
      <category term="设计" scheme="http://hikarievo.me/tags/%E8%AE%BE%E8%AE%A1/"/>
    
  </entry>
  
  <entry>
    <title>用 Office 自带套件快速搞定个性化图表设计</title>
    <link href="http://hikarievo.me/2014/12/08/quick-design-by-using-office/"/>
    <id>http://hikarievo.me/2014/12/08/quick-design-by-using-office/</id>
    <published>2014-12-08T11:03:27.000Z</published>
    <updated>2014-12-08T12:13:26.707Z</updated>
    
    <content type="html">&lt;p&gt;今天老板突然叫我出一张单页，手头工作排得满满当当实在没力气设计，看了一眼草图就是服务的流程图，于是就抓出 Office 准备快速搞定。&lt;/p&gt;
&lt;p&gt;早期 Office 在美感方面真的烂的一[哔~]，可能是因为长期从事文秘编辑工作的人对美缺乏敏感吧。不过从 Office 2010 时代开始， Office 套件的功能和颜色突然出现了质的飞跃，其中新增的 SmartArt 简直是快速设计的福音，加上 PPT 更多炫酷的动画及转场特效，直接让我对 Office 2007 路人转黑，拥抱2010至今。&lt;/p&gt;
&lt;p&gt;SmartArt 是 Office 新增的图表类工具，包含列表、流程图、结构图、关系图、矩阵、棱锥等等种类，每个分类下都有多种图表类型可以选择。Word 的话在上方菜单 插入 -&amp;gt; SmartArt 即可， PPT 同样。然后在弹出的窗口中选择你想要的图表类型，值得注意的是有些图表只支持一级目录，反正切换起来也很方便不用太操心。&lt;/p&gt;
&lt;a id=&quot;more&quot;&gt;&lt;/a&gt;
&lt;p&gt;&lt;img src=&quot;http://hikarievo.qiniudn.com/screenshot/insert-smartart.png&quot; alt=&quot;插入SmartArt&quot;&gt;&lt;/p&gt;
&lt;p&gt;SmartArt仅仅是这样当然不能拿来做设计，但是它的智能化和人性化程度之高，已经到了令人发指的地步了。首先它的层级结构非常清晰。其次根据你的图表类型，在编辑文本的时候，图表会自动增删元素，你可以随便增加无数项，它元素的大小、个数、位置都会根据你的文本情况自动排列，当然字号也会——字太多了的时候，它字号就会自动缩小。&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;http://hikarievo.qiniudn.com/screenshot/edit-smartart.png&quot; alt=&quot;编辑SmartArt&quot;&gt;&lt;/p&gt;
&lt;p&gt;样式当然也有多种选择，无论是配色方案还是展现形式（不过在形式方面，我觉得 Office 次了点，几款伪 3D 主题都做得挺烂的…2D主题基本上可以应付我们现在所能见到的所有扁平风了……如果你觉得系统默认的颜色主题不够看，还可以直接修改文档的颜色主题，如下图：&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;http://hikarievo.qiniudn.com/screenshot/change-colorscheme.png&quot; alt=&quot;修改文档颜色主题&quot;&gt;&lt;/p&gt;
&lt;p&gt;我这个截图是 2013 版的，Office 2010 的颜色主题用形容词来描述每款配色，更适合那些初出茅庐色感不足的新手。当然如果这样还不能满足你，Office 也支持各种自定义，PS 中常用的颜色填充、图案填充、渐变填充（线性、径向、对称），Office 统统可以做到。现在连投影、倒影、外发光、羽化、3D这些也都可以做到，可定制性非常高。&lt;/p&gt;
&lt;p&gt;对齐、层叠这些功能虽说也有，唯一美中不足的可能就是单位和定位问题了，Word 和 PPT 的默认单位都是 cm。PPT 倒是还有（不怎么好使的）参考线，Word 的对齐手段除了对齐工具，也就只剩下像素眼了。【使用 Word 的时候要注意把 SmartArt 的自动换行（布局，在格式中）改为“浮于文字上方”或“衬于文字下方”，否则就没办法随意拖动了。】&lt;/p&gt;
&lt;p&gt;输出格式方面，除了可以另存为PDF之外，也可以使用打印功能发送到 OneNote，然后在 OneNote 中另存为 png 图片（假装你是用 PS 或者 AI 做的！）。&lt;/p&gt;
&lt;p&gt;这么邪道的设计工具，不考虑来一发么~？&lt;/p&gt;
</content>
    
    <summary type="html">
    
      &lt;p&gt;今天老板突然叫我出一张单页，手头工作排得满满当当实在没力气设计，看了一眼草图就是服务的流程图，于是就抓出 Office 准备快速搞定。&lt;/p&gt;
&lt;p&gt;早期 Office 在美感方面真的烂的一[哔~]，可能是因为长期从事文秘编辑工作的人对美缺乏敏感吧。不过从 Office 2010 时代开始， Office 套件的功能和颜色突然出现了质的飞跃，其中新增的 SmartArt 简直是快速设计的福音，加上 PPT 更多炫酷的动画及转场特效，直接让我对 Office 2007 路人转黑，拥抱2010至今。&lt;/p&gt;
&lt;p&gt;SmartArt 是 Office 新增的图表类工具，包含列表、流程图、结构图、关系图、矩阵、棱锥等等种类，每个分类下都有多种图表类型可以选择。Word 的话在上方菜单 插入 -&amp;gt; SmartArt 即可， PPT 同样。然后在弹出的窗口中选择你想要的图表类型，值得注意的是有些图表只支持一级目录，反正切换起来也很方便不用太操心。&lt;/p&gt;
    
    </summary>
    
    
      <category term="设计" scheme="http://hikarievo.me/tags/%E8%AE%BE%E8%AE%A1/"/>
    
      <category term="工具" scheme="http://hikarievo.me/tags/%E5%B7%A5%E5%85%B7/"/>
    
  </entry>
  
</feed>