当前位置:千赢国际官网 > 千赢网页手机版登入 > transform坐标变换,浅谈图片宽度自适应解决方案

transform坐标变换,浅谈图片宽度自适应解决方案

文章作者:千赢网页手机版登入 上传时间:2019-11-04

仙剑奇侠传的web移植版

2015/10/06 · HTML5 · 1 评论 · 仙剑奇侠传

原文出处: 刘骥(@刘骥-JimLiu)   

浅谈图片宽度自适应解决方案

2015/10/19 · CSS, HTML5 · 3 评论 · 自适应

原文出处: 百码山庄   

在网页设计中,随着响应式设计的到来,各种响应式设计方案层出不穷。对于图片响应式的问题也有很多前端开发人员在进行研究。比较好的图片响应式设想便是在不同的屏幕分辨率下使用不同实际尺寸的图片,而达到在高速网络环境中使用大或超大高清图片,在低速网络或需要替用户节省流量资源的环境中使用小而清晰的图片,保证用户无论在何种环境下都能有良好的浏览体验。然而这是一个庞大而具有挑战的工作,我这里不做这个讨论,因为我目前还没有这方面很好的实践。这里我是要跟大家讨论下同一张图片在不同宽度的显示区域中的显示问题。

理解SVG transform坐标变换

2015/10/11 · HTML5 · SVG

原文出处: 张鑫旭   

0. 前言

这是一个坑了太久太久的项目,久到我已经不记得挖这个坑是什么时候了。大概是13年的夏天吧,我挖了这个坑,然后信心满满的在当年十一长假宅了N天(我还比较清楚的记得那时候正是WOW开荒围攻奥格瑞玛副本的阶段),写下了整个框架,以及最核心的一部分代码,然后,就没有然后了。

大概一年后,我又翻出来了这个坑,重构了大量的代码,但是进度几乎没有实质性的进步,甚至因为重构而有所倒退- -“,不过因为读了《游戏引擎架构》这本书,我对这个坑又有了新的认识,对于这个程序到底要怎么写心里有谱多了。

本来计划是在今年夏天搞出来,这样可以赶上仙剑20周年(1995年7月)发布,不过不用想也知道毫无疑问是继续坑了。

磕磕绊绊到如今,总算是把游戏的总体完成度拉到了一个比较能见人的程度,于是我觉得还是赶紧发布的好,免得又变有生之年了。

问题描述

我们先来看下我想要描述的问题。首先我准备了三张宽度不同的图片,让他们垂直排列在页面中,除了去除图片本身在垂直方向上产生的间距,不做其他任何样式处理,这种情况我们通常在博文中经常看到,在写博文的时候经常用到,具体效果请看:图片宽度自适应(1)。简单看下我们的页面结构:

JavaScript

<img src="imgs/560x200.jpg" alt=""><br> <img src="imgs/440x200.jpg" alt=""><br> <img src="imgs/300x200.jpg" alt="">

1
2
3
<img src="imgs/560x200.jpg" alt=""><br>
<img src="imgs/440x200.jpg" alt=""><br>
<img src="imgs/300x200.jpg" alt="">

为了方便查看效果,我们直接调整浏览器宽度来测试。测试效果如下gif图所示:

图片 1

我们不难发现,在我们改变窗口可视区域的时候,图片宽度并不会随之变化,以至于在小屏幕中我们只能开到图片的一部分,这是很多人所不乐见的,因为这极有可能会导致重要信息丢失。那么这个问题如何解决?

一、HTML transform和SVG transform

SVG中自带transform属性,没错,是属性,例如:

JavaScript

<svg width="200" height="150"> <rect x="30" y="30" width="120" height="90" transform="rotate(45)"></rect> </svg>

1
2
3
<svg width="200" height="150">
    <rect x="30" y="30" width="120" height="90" transform="rotate(45)"></rect>
</svg>

普通的HTML元素没有transform属性,但是支持CSS3的transform, 好奇的小伙伴可能会疑问了,CSS3中的transform变换,跟SVG中的transform是什么关系呢?

恩,有点类似于谢霆锋和陈冠希之间的关系,有些小复杂。

图片 2

OK, 先说说相似之处吧。
一些基本的变换类型是一样的,包括:位移translate, 旋转rotate, 缩放scale, 斜切skew以及直接矩阵matrix. 但只局限于2D层面的变换。SVG似乎只支持二维变换(若有不对,欢迎指正),且类似translateXrotateX也都是不支持的。

下面就是不一样的地方了:
1. CSS3 transform一般用在普通元素上,虽然也可以应用在SVG元素上,但是IE浏览器(IE edge未测试)却不支持SVG元素;

JavaScript

rect { /* IE说:你这是弄啥来? */ transform:rotate(45deg); }

1
2
3
4
rect {
    /* IE说:你这是弄啥来? */
    transform:rotate(45deg);
}

2. HTML元素的CSS3 transform和SVG的transform坐标系统大相径庭;

平常我们使用transform其坐标是相对于当前元素而言的,默认是元素的中心点变换,我们可以通过transform-origin属性改变变换的中心点。而SVG中的transform的坐标变换的是相对于画布的左上角计算的,跟HTML的transform差别较大,理解上也更加麻烦。而本文就是彻底理清SVG中的transform到底是怎么工作的。

3. 具体的语法细节有差异。SVG transform属性语法有些自带偏移。而CSS transform则更加纯粹些。

//zxx: 据说CSS的transform和SVG的transform属性即将合并。

1. 无图言屌

优酷视频——有视频有JB!

图片 3图片 4

图片 5

图片 6

图片 7

图片 8

图片 9

图片 10

图片 11

简单尝试

为了保证信息显示完整,保证图片随可视区域宽度变化而宽度自适应,我直接给图片标签设置了宽度100%,具体效果请看:图片宽度自适应(2)。

和示例一一样,我们还是手动改变可视区域宽度来观看图片的表现:

图片 12

现在看来图片是可以根据可视区域宽度自适应了,但是问题来了:首先,所有图片不论原始大小宽窄一律以可是区域宽度为标准了,齐刷刷的一刀切,毫无美感;其次,当较宽显示区域显示较窄图片时,图片出现严重失真,甚至失去识别度。好吧,窄屏的问题解决了,宽屏的问题有来了,不知道这是要闹哪样!但是问题出来了,我们总要想办法去解决啊,那怎么办呢?

二、SVG transform translate位移

我们先来看下最简单最基本的translate位移变换,例如,我们偏移(295,115)大小的位置,HTML元素的偏移(下图左)和SVG元素的偏移(下图右)就会不一样。一个是相对自己的中心点(下图左),一个是SVG的左上角(下图右)。

图片 13

虽然两者的相对位置不一样,但是,对于单纯地位移来讲,无论你相对于那个点位置,实际偏移的位置都是一样的,因此,从表现上讲,两者最终的位置看上去还是一样的。

您可以狠狠地点击这里:HTML translate和SVG translate比对demo

图片 14

前面我们提到过,SVG元素也能使用CSS3的transform进行变换(非IE浏览器),但是只能支持2D层面的几个属性,例如translateX(tx),translateY(ty)以及translate(tx[, ty])translateZ(tz)则并不支持。

如果我们使用SVG元素自带的transform属性进行变换,则仅支持translate(tx[ ty])这种用法(缺省使用0代替),当多个参数值的时候,可以使用逗号,或者直接空格分隔,但是不能包含单位,例如下面这种写法直接翘辫子:

CSS

transform="translate(30px 12px)"

1
transform="translate(30px 12px)"

下面这种无单位写法才可以:

CSS

transform="translate(30 12)" transform="translate(30, 12)"

1
2
transform="translate(30 12)"        
transform="translate(30, 12)"

另外,和CSS3的transform一样,SVG中的translate位移也是支持多声明累加的。例如:

CSS

transform="translate(30 12) translate(30 12)"

1
transform="translate(30 12) translate(30 12)"

等同于:

CSS

transform="translate(60 24)"

1
transform="translate(60 24)"

需要注意的是,俩个translate中间不要混有其他的transform变换。否则,最终的位移就不是简单的相加了。

2. 自问自答的FAQ

兵来将挡,水来土掩

是问题,总有解决的办法,只是成本高低的问题。对于上面这个问题我思考了许久,刚开始我想使用width: 100%;max-width: 图片宽度; 来处理,但是,我发现图片宽度并不统一,max-width需要针对每一个宽度去设置,那根本不可行,无疑是自找麻烦,因为实际应用中,我们完全无法预知用户将使用多大宽度的图片。所以似乎单从控制图片样式已经找不到什么解决办法了,但是我开始关注 width:100%; 的问题。

我们知道,在CSS中,宽度的百分比是是相对于父级容器宽度的。如果我们能有办法控制图片标签的父容器的宽度,那问题是不是就解决了呢?

首先,为了让图片标签有可控的父元素,我们先对代码结构做一点点调整:

JavaScript

<div class="img-wrap"> <img src="imgs/560x200.jpg" alt=""> </div> <div class="img-wrap"> <img src="imgs/440x200.jpg" alt=""> </div> <div class="img-wrap"> <img src="imgs/300x200.jpg" alt=""> </div>

1
2
3
4
5
6
7
8
9
<div class="img-wrap">
    <img src="imgs/560x200.jpg" alt="">
</div>
<div class="img-wrap">
    <img src="imgs/440x200.jpg" alt="">
</div>
<div class="img-wrap">
    <img src="imgs/300x200.jpg" alt="">
</div>

好了,接下来就是如何控制img-wrap元素的宽度的问题了。我首先想到的是浮动(float),因为我们知道浮动元素的宽度是随内容变化的,所以我先给img-wrap设置了如下样式:

JavaScript

.img-wrap {float: left;}

1
.img-wrap {float: left;}

但是,问题又来了,浮动元素会破坏原有的布局,如果不做清除浮动处理,会导致后面的内容紧跟在浮动元素之后。所以为了保证不影响其他内容,我们还得在img-wrap外面加一个容器来控制浮动与否:

JavaScript

<div class="row"> <div class="img-wrap"> <img src="imgs/560x200.jpg" alt=""> </div> </div> <div class="row"> <div class="img-wrap"> <img src="imgs/440x200.jpg" alt=""> </div> </div> <div class="row"> <div class="img-wrap"> <img src="imgs/300x200.jpg" alt=""> </div> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="row">
    <div class="img-wrap">
        <img src="imgs/560x200.jpg" alt="">
    </div>
</div>
<div class="row">
    <div class="img-wrap">
        <img src="imgs/440x200.jpg" alt="">
    </div>
</div>
<div class="row">
    <div class="img-wrap">
        <img src="imgs/300x200.jpg" alt="">
    </div>
</div>

好吧,现在我们在来看看,被折腾成什么样子了,图片宽度自适应(3):

图片 15

哈哈,好像是我想要的效果了。但是,作为一个有点强迫症的开发者,虽然达到了我想要的效果,但加了那么多层嵌套标签,总让我感觉不舒服。于是,我继续折腾,终于我恍然大悟, display:inline-block 的元素宽度也是随内容变化的,而且图片默认样式恰巧也表现为inline-block的效果,是否可以从这里下手呢?

JavaScript

<div class="img-wrap"> <img src="imgs/560x200.jpg" alt=""> </div> <div class="img-wrap"> <img src="imgs/440x200.jpg" alt=""> </div> <div class="img-wrap"> <img src="imgs/300x200.jpg" alt=""> </div>

1
2
3
4
5
6
7
8
9
<div class="img-wrap">
    <img src="imgs/560x200.jpg" alt="">
</div>
<div class="img-wrap">
    <img src="imgs/440x200.jpg" alt="">
</div>
<div class="img-wrap">
    <img src="imgs/300x200.jpg" alt="">
</div>

结构再度回归到只有一层嵌套,然而css样式却需要调整一下:

JavaScript

.img-wrap {display: inline-block;}

1
.img-wrap {display: inline-block;}

当我,再次进行测试的时候,心情舒畅多了,你们感受下:图片宽度自适应(4)。

最后,补上完整的css代码:

CSS

JavaScript

.img-wrap { display: inline-block; } .img-wrap img { width: 100%; vertical-align: middle; }

1
2
3
4
5
6
7
.img-wrap {
  display: inline-block;
}
.img-wrap img {
    width: 100%;
    vertical-align: middle;
}

2 赞 10 收藏 3 评论

图片 16

三、SVG transform rotate旋转

上面的位移变换,我们似乎没看到明显的不一样。但是,从这里的旋转变换开始,就可以看出明显的差异了。

下面图示的是基本的45度旋转(来自css-tricks)(左HTML元素,右SVG元素):

图片 17

由于SVG元素的默认是SVG左上角为中心变换的,因此,矩形旋转的幅度就有了过山车的感觉。

您可以狠狠地点击这里:HTML rotate和SVG rotate比对demo

图片 18

结果会发现,两者位置大相径庭了:

CSS transform中的rotate语法比较直白:rotate(angle),就一个angle参数,表示角度大小,不过必须要有单位,比如deg(度), turn(圈), grad(百分度 – 一种角的测量单位,定义为一个圆周角的1/400。常用于建筑或土木工程的角度测量),甚至可以使用calc()计算,例如:calc(.25turn - 30deg).

但是,SVG中的属性transform旋转就没有这么多花头,单位?哦,别逗了,毛线都没有,直接光秃秃的数值,表示角度deg,例如:

CSS

transform="rotate(45)"

1
transform="rotate(45)"

具体语法为:rotate(angle[ x y]). 大家注意到没有,这里有个[ x y][]表示这个可选参数。也就是说,SVG中的rotate旋转比CSS的rotate多了一个可选参数,那这个可选参数[ x y]表示什么意思呢?

告诉你,是非常有用的东西。用来偏移transform变换中心点的。

为什么说非常有用呢?SVG元素默认是基于左上角的,但是我们的旋转元素往往都在SVG的中间区域,此时旋转跨度太大,智商余额不足的我们就脑补不过来,此时难免希望可以像CSS的transform变换一样,围绕元素的中心点变换。怎么办?

我们可以借助CSS3 transform-origin修改SVG元素默认的变换中心点,然后配合CSS变换。但是,我们前面多次提到,IE浏览器的SVG元素不识别CSS中的transform. 所以,从兼容性上讲,CSS策略是不可行的。难道就没有其他办法了,有,就是这里的可选参数[ x y],通过对变换中心点的偏移修正,我们也能让SVG元素围绕自身的中心点旋转了。

所以,上面的demo,我们稍微修改下,就能让矩形围绕自己旋转了,见下:

JavaScript

<rect x="30" y="30" width="120" height="90" rx="10" ry="10" fill="#a0b3d6" transform="rotate(45, 90 75)"></rect> <!-- 90 = 30 120/2 --> <!-- 75 = 30 90/2 -->

1
2
3
<rect x="30" y="30" width="120" height="90" rx="10" ry="10" fill="#a0b3d6" transform="rotate(45, 90 75)"></rect>
<!-- 90 = 30 120/2 -->
<!-- 75 = 30   90/2 -->

您可以狠狠地点击这里:SVG元素也围绕自身中心点旋转demo

图片 19

使用原理图表示就是下面这样(左HTML旋转,右SVG元素偏移旋转):

图片 20

同样的,rotate旋转可以多个值并存,例如下面的CSS和attribute用法:

CSS

transform: rotate(45deg) rotate(-45deg); transform="rotate(45) rotate(-45)

1
2
transform: rotate(45deg) rotate(-45deg);
transform="rotate(45) rotate(-45)

然而,需要注意的是,SVG属性的transform声明的中心变换坐标是不能共享的。

因此,虽然transform="rotate(45, 90 75)"是中心点旋转,但是,后面再添加其他东西,例如:rotate(-45)则偏移值忽略,终中心点还是SVG的左上角(0,0)位置,好惨!

例如原来的45度旋转,再加个-45度反向旋转:

XHTML

<rect x="30" y="30" width="120" height="90" rx="10" ry="10" fill="#a0b3d6" transform="rotate(45, 90 75) rotate(-45)"></rect>

1
<rect x="30" y="30" width="120" height="90" rx="10" ry="10" fill="#a0b3d6" transform="rotate(45, 90 75) rotate(-45)"></rect>

结果位置回去了?才怪呢!图片 21

CSS的是又回去了,但是SVG的确是挂在月球上了。究其原因是rotate(-45)又是相对SVG左上角变换的啦!

图片 22

您可以狠狠地点击这里:SVG连续旋转demo

虽然乍看上去,好像SVG的坐标系统有些怪怪的,但是,实际上,在有些需求场景下,SVG这种看似独立的偏移系统更容易实现一些功能。

比方说,我们希望某个SVG元素先以右下角为中心旋转90度,然后再以右上角为中心旋转90度,该怎么处理?

对于SVG transform,我们直接面向需求写数值就可以了。假设我们的SVG元素的高宽是120*90, 左上角坐标是(30,30), 则,显然,右下角坐标是(150,120), 右上角坐标是(150,30),于是,我们的transform值就很简单:

XHTML

transform="rotate(90, 150 120) rotate(90 150 30)"

1
transform="rotate(90, 150 120) rotate(90 150 30)"

参见下面的示意图(示意图的坐标与上面略有出入,但不影响原理示意):图片 23

但是,如果我们使用之前容易理解的CSS3来实现,反而就复杂了,因为CSS3中的transform的变换点只能一次性指定,如果要实现不同变换点的旋转效果,只能通过translate再次偏移,例如,实现上面的右下角再右上角90度旋转,则要这样:

CSS

transform-origin: right bottom; /* 或者 100% 100% */ transform: rotate(90deg) translate(0, -100%) /* 从右下到右上 */ rotate(90deg) translate(0, 100%);

1
2
3
4
5
6
transform-origin: right bottom; /* 或者 100% 100% */
transform:
  rotate(90deg)
  translate(0, -100%) /* 从右下到右上 */
  rotate(90deg)
  translate(0, 100%);

Gif示意下就是:图片 24

显然要麻烦很多。可见,两种坐标系统没有绝对的优劣。

您可以狠狠地点击这里:右下再右上旋转90度demo

图片 25

上图为两种变换的最终效果,虽然最终的效果是一样的,但是,从理解上而言,这回,是SVG的transform反而更容易理解。还是那句话,辩证看问题,凡事无绝对。

2.1. 能玩吗?

。但在GitHub repo里并不会包含游戏的资源文件,于是需要自己去找(嘿嘿mq2x)。由于不分发游戏资源文件,且考虑到体积,我也不会提供一个在线游玩的版本。所以基本上只有开发者或者动手能力强的同学才能玩上它了(如果你真的想玩……)

不考虑遇到BUG(无数个)造成游戏直接罢工的情况下(当然身为作者的我是可以驾轻就熟地避过这些BUG的233333),已经可以从新开游戏一直玩到大结局了,而且我已经通关两三遍了XD

四、SVG transform scale缩放

SVG中的缩放的语法就比较单纯了,就scale(sx[, sy])sx表示横坐标缩放比例,sy表示纵坐标缩放比例。其中sy是可缺省的,如果缺失,表示使用和sx一样的值,也就是等比例缩放。其中,sxsy两个参数可以逗号分隔,也可以使用空格分隔。这和CSS3中的使用有所不同,两外,SVG transform属性值缩放是不支持scaleXscaleY这些鬼的。

同样的,CSS控制的transform和SVG元素属性控制的transform的坐标系统是不一样的。一个默认元素中心(下图左),一个是SVG画布左上角(下图右),于是(from css-tricks):图片 26

因此,当我们对SVG元素scale缩放时候,发现位置也有出乎我们意料,就应该知道是怎么回事了。

rotate旋转虽然也是迥异坐标,但是其参数自带偏移参数,我们我们移个花接个木,还是可以得到我们想要的结果。但是,scale缩放这里,就要悲惨很多了,没有自带偏移参数,于是,当我们要实现SVG元素居中缩放的效果,还需要使用translate手动偏移。

怎么个手动偏移法呢?即使先translate其中心点位置到元素的中心坐标位置,然后缩放,然后坐标再反方向还原回去。例如,某元素中心点坐标是(95, 75), 垂直缩放1.5倍的效果则是:

CSS

transform="translate(95 75) scale(1, 1.5) translate(-95 -75)"

1
transform="translate(95 75) scale(1, 1.5) translate(-95 -75)"

您可以狠狠地点击这里:CSS transform和SVG transform scale缩放demo

对应的CSS代码就简单多了,直接:

CSS

.scale { transform: scale(1, 1.5); }

1
2
3
.scale {
    transform: scale(1, 1.5);
}

然后最终效果都是一样的:图片 27

使用Gif原理示意如下:

图片 28

本文由千赢国际官网发布于千赢网页手机版登入,转载请注明出处:transform坐标变换,浅谈图片宽度自适应解决方案

关键词: 千赢国际官网