32.元件属性的使用（二）

商品这次要做的效果就是如下：淘宝商品一张图片里有一个矩形框 矩形框中选中的图片区域会放大 而且矩形不能离开图片 并且矩形框跟随鼠标一起移动

 

首先添加一个图片加矩形框 矩形框30透明度 而且是灰色  无线条

 

更多事件里有一个“鼠标移动时”

鼠标要求必须在矩形中间 但是鼠标的位置并不是矩形框的位置 如图所示可知鼠标位置是矩形高度的一半 以及宽度的一般 因此矩形的位置就用鼠标的位置减去矩形框高度以及宽度的一半

对图片进行鼠标移入时的动作设置

 

就是使用这个公式 鼠标位置减去小矩形位置的一半 其中Target就是小矩形 也就是目标元件

注意高度的设置与宽度的不同 

但是这样设置好之后鼠标还是不会一直保持在框中间 就好像有延迟 这时候我们要添加一个透明的矩形 就好像玻璃两方的两块磁铁 鼠标以及矩形框就是两块磁铁 同时移动 怎么操作？

设置跟图片同样大小的矩形 然后设置透明 同时置于顶层 然后把之前图片的动作剪切到这个大矩形框（玻璃）上

 矩形框会超出图片边界 怎么操作？思路：用元件属性的边界来操作 小矩形一旦超过大矩形的边界立马就拉回来

先来模拟第一种情况 不让小矩形超出大矩形的上边界：

添加一个用例 同时增加条件 一旦小矩形上边界小于大矩形上边界就立马改变小矩形的高度 因此达到阻挡的效果 其中因为是纵向移动 X轴没有变化 所以还是用Target.x 而Y用了This.top 最后记得更改elseif为if 因为这个条件必须执行 因为Y并不是底部！

这是获取小矩形高度的公式 它既不是This元件也不是Target元件 那我们就用局部变量来获取这个小矩形元件 然后用公式

接下来我们处理下边界： 一定要注意right、left与X的区别  height、bottom与Y的区别

下边界条件设置

下边界Y轴公式 因为这个时候移动了小矩形所以小矩形成为了目标元件 this.bottom就是大矩形底部的高度 这个高度减去小矩形的高度才是小矩形应该停留的高度位置 不然就会超出

对左边界的设置：

对下边界的设置 同时注意也要right减去宽度width

总动作！

 

其实我们还有一种特别简单的方法：

小矩形是160X160 图片是400X400 那么我们设置大矩形为240X240 同时把大矩形居中在图片中 保留用例1即可