# Image3DJs

**Repository Path**: wangyingjun01/Image3DJs

## Basic Information

- **Project Name**: Image3DJs
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 11
- **Created**: 2021-12-02
- **Last Updated**: 2024-05-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Image3DJs
  最近自如团队实现了一个裸眼3D效果，有点小火，各平台的版本都随之产生了，这怎么少得了鸿蒙的，此组件便是该效果在鸿蒙Js上的实现，感谢自如团队的创意！

## 效果图
<img src="screen/Image3DJs.gif"/>

## 如何使用
1.在你的css中定义你的组件宽高（也可以在hml中通过style来定义）
```css
.image_3d {
    width: 100%;
    height: 460px;
}
```
2.在你的hml中写页面
```hml
<element name="image_3d" src="../../common/commonent/Image3D/Image3D.hml"></element>
<div class="container">
    <image_3d class="image_3d"
              img-background="/common/images/background.png"
              img-mid="/common/images/mid.png"
              img-foreground="/common/images/foreground.png">
    </image_3d>
    <!--下面须有你自己的布局，否则image3D组件会超过组件边界-->
    <div style="width: 100%; height: 200px; background-color: white;"></div> 
</div>
```

hml中可以使用的自定义属性

| name           | format | description        | default_value  |
| :-------------:| :----: | :----------------: | :------------: |
| scale          | float  | 底图和上层图的放大比例 | 1.2            |
| sensitivity    | float  | 灵敏度              | 1              |
| img-background | string | 底层图片路径         | “ ”            |
| img-mid        | string | 中层图片路径         | “ ”            |
| img-foreground | string | 上层图片路径         | “ ”            |

## 实现原理
&emsp;&emsp;裸眼3D效果，其实就是将图片分为三层（底层、中层、上层），然后将底层与上层进行放大，使其尺寸大于控件尺寸，再监听手机方向传感器，根据手机方向变化来对底层和上层图片进行位移（底层图片的位移方向要与上层图片的位移方向相反哦），中层则不动，以此在视觉上给人一种3D的效果。

## 运行要求
SDK 6+

## LICENSE
```
Copyright (c) 2021 ZhangXiaoqiu
Image3DJs is licensed under Mulan PSL v2.
You can use this software according to the terms and conditions of the Mulan PSL v2.
You may obtain a copy of Mulan PSL v2 at:
         http://license.coscl.org.cn/MulanPSL2
THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
See the Mulan PSL v2 for more details.
```