360 Javascript 查看器

具有缩放功能的灵活的光响应360图像取景器. 您可以使用 npm( 类型描述支持) 或者在您的页面中包含脚本。 自动化,分批装入图像,惯性和速度控制. 制作自定义进度栏,内置动画和自定义缩放功能的事件. 几种从外部导航的方法,这些方法有望使行动容易连锁. 使用来自任意位置的所有类型的图像, 并带有灵活的起始编号和文件名 .

检查示例 360-javascriptviewer.com (中文(中国大陆) )

安装

使用 npm 键盘声明文件 :

npm i @3dweb/360javascriptviewer

import {JavascriptViewer} from "@3dweb/360javascriptviewer";

或使用 CDN 获取最新版本

<script src="https://cdn.jsdelivr.net/npm/@3dweb/360javascriptviewer@1/lib/JavascriptViewer.min.js"></script>

基本用途

首先创建用于创建360演示文稿的地盘. 我们用这个 div 的大小来计算 放大姿势 拖放和缩放事件也被添加到此 div( 默认 #jsv- holders) 中 . 在其中插入一个图像, 它往往是360 图像serie的第一个图像 。 此图像将替换为 满载时360演示文稿. 如果您不指定, 此图像将用来确定其它图像文件名 . 如果主要图像是产品. jpg,同一文件夹中的其他图像必须被称作出品 1.jpg,出品 2.jpg等. 但如果您有您360图像的其他文件名/ 位置, 您可以用 imageUrlFormat 参数更改此命名格式行为 .

    <script defer src="https://cdn.jsdelivr.net/npm/@3dweb/360javascriptviewer/lib/JavascriptViewer.min.js"></script>
    
    <style>
        #jsv-holder {
            width:500px;
         }
        #jsv-holder img {
            width: 100%;
         }
    </style>

    <div id="jsv-holder">
        <img id="jsv-image" alt="example" src="https://360-javascriptviewer.gumlet.io/images/phone/iphone-gold-01.png">
    </div>
    
    <script>        
        window.addEventListener('load', () => {
            const viewer = new JavascriptViewer({
                mainHolderId: 'jsv-holder', 
                mainImageId: 'jsv-image', // will hide after loading
                imageUrlFormat: 'iphone-gold-xx.png',
                totalFrames: 72,
                speed: 70,
                defaultProgressBar: true
            });
            
            // use events for example
            viewer.events().loadImage.on((progress) => {
                // use this for your own progress bar    
                console.log(`loading ${progress.percentage}%`)
            })           
             
             viewer.events().started.on((result) => {
                // use a promise or a start event to trigger things    
            })
            
             viewer.start().then(() => {
                viewer.rotateDegrees(180).then(() => {
                    // continue with your amazing intro
                })
            });
        });
    </script> 

API 密码

构造器

方法

• 开始( c): 保证
  开始演示文稿,加载所有图像并用360演示文稿来取而代之.
• 销毁(): 保证
  破坏演示文稿并返回到以前的状态..
• 旋转Degrees( 度: 数): 保证
  设定想要的旋转,360型正在旋转.
• 旋转toDegree(目标Degree:数,最短Way?:布尔,使用Easing?布尔): 保证
  旋转到一定程度。 框架nr 1为0度.
• 旋转 ToFrame( 框架: 数字, 最短的Way? : 布尔, 使用 Easing? : 布尔): 保证
  旋转到某个框架 .
• setSpeed( 速度: 数字)弃权: 在图像中放大并平板.
• 缩放( 系数: 数, x: 数, y: 数): 保证
  以系数为单位并按百分比从中-1和0-1放大.
• set Inertia( 内地: 数量)弃权:
  设置查看器的当前惯性
• 事件()编号 :
  使用此选项来记录事件
  isZoomedIn () (中文(简体) ): 布尔 检查演示文稿是否缩放 .

活动

• 装入图像: 进展 使用此事件创建您的进度栏
  viewer.events().loadImage.on((progress) => { // use the progress object for your own loader })

• 开始: 布尔 当查看器准备好时使用此事件触发其它动作
  viewer.events().started.on((boolean) => { // start intro animations or other creative ideas })

• 启动: IHANLE 软件 使用此事件来抓取用户拖动 . viewer.events().startDragging.on((handle) => { // show or hide information on the viewer or send statistics })

• 变化图状态 : 当新图像可见时会起火, 与可启用的 ChangeImageEvent 结合工作: true viewer.events().changeImage.on((handle) => { // show or hide information on the viewer or send statistics })

• 自动旋转状态 : 自动旋转停止时起火 viewer.events().endAutoRotate.on((status) => { // show or hide information on the viewer or send statistics })

• 单击点击 当用户点击图像时开火, 与启用图像事件结合工作: 真 viewer.events().click.on((click) => { // Use this event for zoom functions })

• 键坐标: 当用户按住图像( 带2个指的移动区域) 时会起火, 工作结合 usualImageEvents: true viewer.events().pinch.on((click) => { // Use this event for zoom functions })

• 滚动: IScroll (英语) 当用户使用鼠标卷轴时会点火, 工作与启用图像Events: true viewer.events().pinch.on((click) => { // Use this event for zoom functions })

• 双击点击 当用户双击一幅图像时会点火, 工作与启用图像Events: true viewer.events().pinch.on((click) => { // Use this event for zoom functions })

接口

• 回复 {
    当前Degree:数字;
  {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢

• IAutoCDNResizer 配置 {
    使用 Width: 布尔; // 默认为真
    使用H8:布尔;
    缩放With ZoomMax:布尔; // 默认错误地加载图像, 以缩放max系数表示高度或宽度
    外加Params: 对象; /// 在图像 urls 中添加额外参数
  {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢

• 连接{
    拖曳旋转 : {
     显示“ 开始旋转 ”,
     图像Url: 字符串,
     语言: 翻译[],
     主颜色:字符串 // hex, rgb 或 rgba 颜色
     文本颜色:字符串 //hex、rgb 或 rgba 颜色
    {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢
  {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢

• 翻译 { [
    语言:字符串,//ISO语言代码(en-US,nl-NL)
    文本:字符串
  [ [ ]

• 现状{
    当前Degree:数字;
    当前图像:图像;   已完成:布尔; {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢

• 图像{
    编号:字符串;
    弧:字符串;   序列:编号; {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢