Background2To3
这是个传入 2D 图片及其深度图得到 3D 背景图的组件
代码
<Background2To3
picSrc="/images/2dto3d.jpg"
depthSrc="/images/2dto3d_depth.jpg"
:strength="3"
selfStyle="width:780px; height:360px; top: 0; left: 0;z-index:1"
></Background2To3>
示例
Attributes
| 参数 | 说明 | 类型 | 是否必要 | 默认值 |
|---|---|---|---|---|
| picSrc | 图片入口 | String | true | - |
| depthSrc | 深度图入口 | String | true | - |
| strength | 3D 效果强度 | Number | false | 2 |
| adaptive | 是否开启自适应 | Boolean | false | true |
| canvasHeight | 画布高度比例 | Number | false | 1 |
| canvasWidth | 画布宽度比例 | Number | false | 1 |
| selfStyle | 自定义样式 | String | false | 'width: 100vw; height: 100vh; position: absolute; top: 0; left: 0;z-index:-1' |
| picLoadedFn | 图片加载完成后的回调函数 ，默认传参 e 为图片信息 | Function | false | - |
| mouseMoveFn | 鼠标移动触发事件，默认传参 e 为鼠标移动信息 | Function | false | - |
| screenResizeFn | 页面窗口变化事件，默认传参 e 为页面窗口信息 | Function | false | - |