对齐web/pin
将元素对齐到其它元素的边缘。
位置：
<select id="align">
<option value="leftTop">ll-tb（leftTop）</option>
<option value="left">ll-cc（left）</option>
<option value="leftTop">ll-tb（leftTop）</option>
<option value="leftBottom">ll-bt（leftBottom）</option>
<option value="rightBottom">lr-bb（rightBottom）</option>
<option value="right">rr-cc（right）</option>
<option value="rightTop" selected="selected">rr-tb（rightTop）</option>
<option value="topRight">rl-tt（topRight）</option>
<option value="top">cc-tt（top）</option>
<option value="topLeft">lr-tt（topLeft）</option>
<option value="bottomLeft">lr-bb（bottomLeft）</option>
<option value="bottom">cc-bb（bottom）</option>
<option value="bottomRight">rl-bb（bottomRight）</option>
<option value="center">cc-cc（center）</option>
<option value="ll-tt">ll-tt</option>
<option value="rr-tt">rr-tt</option>
<option value="ll-bb">ll-bb</option>
<option value="rr-bb">rr-bb</option>
<option value="lr-tb">lr-tb</option>
<option value="rl-tb">rl-tb</option>
<option value="lr-bt">lr-bt</option>
<option value="rl-tb">rl-tb</option>
</select>
<br>
<div class="doc-box" style="cursor: move;" id="target">拖动我</div>
<div class="doc-box doc-box-small doc-box-yellow" id="elem"></div>
<script>
import pin from "web/pin";
import draggable from "web/draggable";
function repin(){
pin(elem, target, align.value, 10);
}
repin();
align.onchange = repin;
draggable(target, {
onDragMove: repin
});
</script>定位修正
如果定位后发现目标元素比容器小，则 pin 会尝试通过翻转的方式自动纠正定位。
API
全局
| 函数 | 描述 | ||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
⮞
pin(elem, target, ...)(elem:
将元素对齐到其它节点或区域。
返回值类型： 返回定位结果。 示例 |
将元素对齐到其它节点或区域。 |
PinAlign 类型
表示对齐的位置。
同："cc-cc" | "ll-tb" | "ll-cc" | "ll-bt" | "lr-bb" | "rr-cc" | "rr-tb" | "rl-tt" | "cc-tt" | "lr-tt" | "cc-bb" | "rl-bb" | "center" | "leftTop" | "left" | "leftBottom" | "rightBottom" | "right" | "rightTop" | "topRight" | "top" | "topLeft" | "bottomLeft" | "bottom" | "bottomRight" | "ll-tt" | "ll-bb" | "lr-tb" | "lr-cc" | "lr-bt" | "cc-tb" | "cc-bt" | "rl-tb" | "rl-cc" | "rl-bt" | "rr-tt" | "rr-bt" | "rr-bb"
说明
位置使用格式为“xx-yy”的字符串表示。
其中 xx 表示水平方向的位置，可取以下值之一：
ll: 对齐到target左边框的左侧。lr: 对齐到target左边框的右侧。cc: 对齐到target水平居中位置。rl: 对齐到target右边框的左侧。rr: 对齐到target右边框的右侧。
其中 yy 表示垂直方向的位置，可取以下值之一：
tt: 对齐到target上边框的上侧。tb: 对齐到target上边框的下侧。cc: 对齐到target垂直居中位置。bt: 对齐到target下边框的上侧。bb: 对齐到target下边框的下侧。
对于常见的位置，也可以直接使用下图中的字符串表示：
| topLeft top topRight
| ┌───────────────┐
| leftTop │ │ rightTop
| │ │
| left │ center │ right
| │ │
|leftBottom │ │ rightBottom
| └───────────────┘
| bottomLeft bottom bottomRightPinResult 接口
继承自：Rect
表示定位的结果。
| 字段 | 类型 | 描述 | 继承自 |
|---|---|---|---|
⮞
target
: Rect
目标区域。 |
Rect
|
目标区域。 |
— |
⮞
container
: Rect
容器区域。 |
Rect
|
容器区域。 |
— |
⮞
align
: "cc-cc" | "ll-tb" | "ll-cc" | "ll-bt" | "lr-bb" | "rr-cc" | "rr-tb" | "rl-tt" | "cc-tt" | "lr-tt" | "cc-bb" | "rl-bb" | "ll-tt" | "ll-bb" | "lr-tb" | "lr-cc" | "lr-bt" | "cc-tb" | "cc-bt" | "rl-tb" | "rl-cc" | "rl-bt" | "rr-tt" | "rr-bt" | "rr-bb"
对齐方式。 |
string
|
对齐方式。 |
— |
⮞
rotateX
: boolean
是否水平翻转了位置。 |
boolean
|
是否水平翻转了位置。 |
— |
⮞
rotateY
: boolean
是否垂直翻转了位置。 |
boolean
|
是否垂直翻转了位置。 |
— |
⮞
transformX
: boolean
是否调整了水平位置。 |
boolean
|
是否调整了水平位置。 |
— |
⮞
transformY
: boolean
是否调整了垂直位置。 |
boolean
|
是否调整了垂直位置。 |
— |
⮞
scaleX
: boolean
是否调整了宽度。 |
boolean
|
是否调整了宽度。 |
— |
⮞
scaleY
: boolean
是否调整了高度。 |
boolean
|
是否调整了高度。 |
— |
⮞
x
: number
|
number
|
相对于屏幕左上角的水平距离（单位为像素）。 |
Point |
⮞
y
: number
|
number
|
相对于屏幕左上角的垂直距离（单位为像素）。 |
Point |
⮞
width
: number
|
number
|
宽度（单位为像素）。 |
Size |
⮞
height
: number
|
number
|
高度（单位为像素）。 |
Size |