AngularJS实现slide指令

前端的HTML代码如下:

<div test-slide="{{imgs}}" data-time="3"></div>

指令testSlide代码:

.directive("testSlide", function ($interval) {
    return {
        restrict: 'A',
        replace: false,
        link: function (scope, ele, attr) {
            scope.imgs = JSON.parse(attr.testSlide);
            var time = parseFloat(attr.time);
            if (scope.imgs.length > 0 && time > 0) {
                if (typeof window.__slide === "object" && window.__slide != null) {
                    $interval.cancel(window.__slide);
                }
                window.__slide = $interval(function () {
                    var n = $(".slide>.active");
                    var c = $(".slide").children();

                    var index = -1;
                    $.each(c, function (i, n) {
                        if (i + 1 === c.length && index === -1) {
                            index = 0;
                        }
                        if ($(n).hasClass('active') === true && index === -1) {
                            index = i+1;
                        }
                    })

                    n.removeClass('active slideInRight');
                    $(c[index]).addClass('active slideInRight');

                    if(typeof c[index] === "undefined"){
                        $interval.cancel(window.__slide);
                    }
                }, time * 1000)
            }
        },
        template: '<div><style>\n' +
        '        .slide{width: 100%;}\n' +
        '        .slide .slide-img{width: 100%;display: none;}\n' +
        '        .slide .active{display: block;}\n' +
        '    </style><div class="slide">' +
        '   <div class="slide-img {{$first?\'active\':\'\'}}" ng-repeat="v in imgs">' +
        '       <img ng-src="{{v}}"/>' +
        '   </div>' +
        '</div></div>'
    }
})

 

功能实现了,但是可能需要增加一些动画效果,这里就懒得整了。

360全景图three.js与Photo-Sphere-Viewer-master 3D全景浏览开发

1.支持WebGL和canvas的浏览器 (IE10, IE11支持, 但在IE里移动图片时很卡, 不一定是全部人都有这情况)

2.Three.js (文件较大, 有官网demo, 可不下载, 下载photo-sphere-viewer.js时也有three.js)

1
下载地址:https://github.com/mrdoob/three.js

3.photo-sphere-viewer.js (这是基于Three.js开发的柱状全景图插件)

1
下载地址:https://github.com/JeremyHeleine/Photo-Sphere-Viewer

4.360度全景图,是左右能够完美拼接的

1
参考: 图片尺寸 3600 * 1800 (最佳尺寸) http://www.360pano.eu/show/?id=400

5.引入js

1526536201-5375-5-20171127170330815-27454492

6.js调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var div = document.getElementById('container');
var PSV = new PhotoSphereViewer({
    // Path to the panorama
    panorama: 'images/0398.jpg',
    // Container
    container: div,
    // Deactivate the animation
    time_anim: false,
    // Display the navigation bar
    navbar: true,      
    // Resize the panorama
    size: {
        width: '800px',
        height: '400px'
    },
    // 限制顶部
    // tilt_up_max: Math.PI / 7,       
    // 限制底部
    // tilt_down_max: Math.PI / 7     
});

7.API选择, 配置参数介绍

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
panorama:(必选)全景图的路径。
container:(必选)放置全景图的容器。
autoload:(默认为truetrue为自动加载全景图,false为迟点加载全景图(通.过load方法)。
usexmpdata:(默认值为true)photo sphere viewer是否必须读入xmp数据,false为不必须。
cors_anonymous:(默认值为truetrue为不能通过cookies获得用户
pano_size:(默认值为null)全景图的大小,是否裁切。
default_position:(默认值为0)定义默认位置,用户看见的第一个点,例如:{long: math.pi, lat: math.pi/2}。
min_fov:(默认值为30)观察的最小区域,单位degrees,在1-179之间。
max_fov:(默认值为90)观察的最大区域,单位degrees,在1-179之间。
allow_user_interactions:(默认值为true)设置为false,则禁止用户和全景图交互(导航条不可用)。
allow_scroll_to_zoom:(默认值为true)若设置为false,则用户不能通过鼠标滚动进行缩放图片。
tilt_up_max:(默认值为math.pi/2)向上倾斜的最大角度,单位radians。
tilt_down_max:(默认值为math.pi/2)向下倾斜的最大角度,单位radians。
min_longitude:(默认值为0)能够展示的最小经度。
max_longitude:(默认值为2PI)能够展示的最大维度。
zoome_level:(默认值为0)默认的缩放级别,值在0-100之间。
long_offset:(默认值为PI/360)mouse/touch移动时每像素经过的经度值。
lat_offset:(默认值为pi/180)mouse/touch移动时每像素经过的纬度值。
time_anim(默认值为2000)全景图在time_anim毫秒后会自动进行动画。(设置为false禁用它)
reverse_anim:(默认值为true)当水平方向到达最大/最小的经度时,动画方向是否反转(仅仅是不能看到完整的圆)。
anim_speed:(默认值为2rpm)动画每秒/分钟多少的速度。
vertical_anim_speed:(默认值为2rpm)垂直方向的动画每秒/分钟多少的速度。
vertical_anim_target:(默认值为0)当自动旋转时的维度,默认为赤道。
navbar:(默认为false)显示导航条。
navbar_style:(默认值为false)导航条的样式。有效的属性:
    backgroundColor:导航条背景色(默认值rgba(61, 61, 61, 0.5));
    buttonsColor:按钮前景色(默认值 rgba(255, 255, 255, 0.7));
    buttonBackgroundColor:按钮激活时的背景色(默认值 rgba(255, 255, 255, 0.1));
    buttonsHeight:按钮高度,单位px(默认值 20);
    autorotateThickness:自动旋转图片的层(默认值 1);
    zoomRangeWidth:缩放游标的宽度,单位px(默认值 50);
    zoomRangeThickness:缩放游标的层(默认值 1);
    zoomRangeDisk:缩放游标的放大率,单位px(默认值 7);
    fullscreenRatio:全屏图标的比例(默认值 4/3);
    fullscreenThickneee:全屏图片的层,单位px(默认值 2)
loading_msg:(默认值为Loading...)加载信息。
loading_img:(默认值 为null)loading图片的路径。
loading_html:(默认值 为null)html加载器(添加到容器中的元素或字符串)。
size:(默认值为null)全景图容器的最终尺寸,例如{width: 500, height: 300}。
onready:(默认值为null)全景图准备好并且第一张图片展示出来后的回调函数。
方法介绍
addAction():添加事件(插件没有提供执行事件的方法,似乎是提供给插件内部使用的)。
fitToContainer():调整全景图容器大小为指定大小。
getPosition():获取坐标经纬度。
getPositionInDegrees():获取经纬度度数。
getZoomLevel():获取缩放级别。
load():加载全景图()。
moveTo(longitude, latitude):根据经纬度移动到某一点。
rotate(dlong, dlat):根据经纬度度数移动到某一点。
toggleAutorotate():是否开启全景图自动旋转。
toggleDeviceOrientation():是否开启重力感应方向控制。
toggleFullscreen():是否开启全景图全屏。
toggleStereo():是否开启立体效果(可用于WebVR哦)。
zoom(level):设置缩放级别。
zoomIn():放大。
zoomOut():缩小。

示例参考:https://threejs.org/examples/#webgl_animation_cloth

 

angularJs ng-options指令详解

ng-options一般有以下用法及其详解

数组:

  •  label for value in array
  •  select as label for value in array
  •  label group by group for value in array
  •  label disable when disable for value in array
  •  label group by group for value in array track by trackexpr
  •  label disable when disable for value in array track by trackexpr
  •  label for value in array | orderBy:orderexpr track by trackexpr(for including a filter with track by)

对象:

  •  label for (key , value) in object
  •  select as label for (key ,value) in object
  •  label group by group for (key,value) in object
  •  label disable when disable for (key, value) in object
  •  select as label group by group for(key, value) in object
  •  select as label disable when disable for (key, value) in object

选中:

ng-options的选中方式是根据ng-model而决定的,假如我们的对象是:

[{“value”:0,”name”:”否”},{“value”:1,”name”:”是”}]

那么ng-model对应的就是:

{“value”:0,”name”:”否”} 或者是 {“value”:1,”name”:”是”} 对象。

一个例子:

//The html code.
<select class="form-control" ng-model="selected" ng-options="n.name for (i,n) in defaultContent" ng-change="change(selected)"></select>

 

//and the js code.

.controller("testController",function($scope){

    /**
     * selected value.
     * @type {string}
     */
    $scope.content = "0";

    /**
     * select options object.
     */
    $scope.defaultContent = JSON.parse('[{"value":0,"name":"否"},{"value":1,"name":"是"}]');

    /**
     * foreach defaultContent and found the selected object.
     */
    for(i in $scope.defaultContent){

        /**
         * if defaultContent[i].value equals content,than the selected object is defaultContent[i].
         */
        if($scope.defaultContent[i].value == parseInt($scope.content)){
            $scope.selected = $scope.defaultContent[i];
            break;
        }
    }
    $scope.change = function(obj){
        log(obj)
    }
})
  • defaultContent是我们默认的下拉选择框的对象数组。
  • content是下拉选择框选中value的值
  • 经过遍历数组,找出选中值的对应对象复制给新申明的选中对象selected。
  • html代码ng-model赋值selected就可以了。

解决spring mvc跨域的问题

java开发网站是很繁琐的事情,特别是写前端,每次运行都需要进行编译,所以需要配置跨域访问:

服务端

首先要创建一个CrossDomainFilter类,类继承了Servlet Filter接口,如下代码:

import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * Created by alan.luo on 2017/9/5.
 */
public class CrossDomainFilter extends Compact implements Filter {


    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain filterChain) throws IOException, ServletException {

        try {
            HttpServletRequest httpRequest = (HttpServletRequest) request;
            HttpServletResponse httpResponse = (HttpServletResponse) response;

            // 跨域
            String origin = httpRequest.getHeader("Origin");
            if (origin == null) {
                httpResponse.addHeader("Access-Control-Allow-Origin", "http://localhost/");

            } else {
                httpResponse.addHeader("Access-Control-Allow-Origin", origin);
            }
            httpResponse.addHeader("Access-Control-Allow-Headers", "Origin, x-requested-with, Content-Type, Accept,X-Cookie");
            httpResponse.addHeader("Access-Control-Allow-Credentials", "true");
            httpResponse.addHeader("Access-Control-Allow-Methods", "GET,POST,PUT,OPTIONS,DELETE");
            if ( httpRequest.getMethod().equals("OPTIONS") ) {
                httpResponse.setStatus(HttpServletResponse.SC_OK);
                return;
            }
            filterChain.doFilter(request, response);
        } catch (Exception e) {
            e.printStackTrace();
            throw e;
        }
    }

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @Override
    public void destroy() {
    }
}

类方法主要是配置response的响应信息,告诉客户端,可以传递什么及使用什么方法过来。

接下来就是配置xml文件,打开web.xml文件,在过滤代码中加入以下代码:

<!-- 允许跨域 -->
<filter>
    <filter-name>CrossDomainFilter</filter-name>
    <filter-class>com.test.com.CrossDomainFilter</filter-class>
    <init-param>
        <param-name>targetFilterLifecycle</param-name>
        <param-value>true</param-value>
    </init-param>
</filter>
<filter-mapping>
    <filter-name>CrossDomainFilter</filter-name>
    <url-pattern>/*</url-pattern><!-- 配置允许跨域访问的的url-pattern -->
</filter-mapping>

到这里服务器就已经配置完毕了。

客户端

客户端直接使用ajax发起请求就可以:

  /**
   * 发起ajax请求
   * @param url 请求地址
   * @param data 请求参数(object)对象
   * @param fnScuss 成功回调的函数
   * @param fnError 失败回调的函数
   * @returns {{get: get, post: post}}
   */
  ajax: function (url, data, fnScuss, fnError) {
      
      var _cacheKey = app.md5(url+JSON.stringify(data));
      var _cache = null;
      var _isCanCache = app.isCanCache(url);
      url = this.constant.DOMAIN + url;

      var http = function (method,header) {
          if (method == null){
              method = "POST";
          }
          if(header == null){
              header = new Object();
          }
     
          $.ajax({
              url: url,
              data: data,
              dataType: "json",
              type: method,
              headers: header,
      beforeSend: function(xhr) {
         xhr.withCredentials = true;
      },
      crossDomain:true,
              success: function (e) {

                  if (typeof fnScuss == "function") {
                      //储存缓存
                      if (e.code == "1" && _isCanCache == true){
                          //app.cache.set(_cacheKey,e)
                      }
                      fnScuss(e);
                  }
              },
              error: function (e) {
                  if (typeof fnError == "function") {
                      fnError(e);
                  }
              }

          })
      };

      return {
          get: function () {
              //缓存判断
              if (_isCanCache == true){
                  _cache = app.cache.get(_cacheKey)
                  if (_cache != null && typeof fnScuss == "function"){
                      fnScuss(_cache);
                      return true;
                  }
              }

              http("GET");
          },
          post: function (isJson) {
              //缓存判断
              if (_isCanCache == true){
                  _cache = app.cache.get(_cacheKey)
                  if (_cache != null && typeof fnScuss == "function"){
                      fnScuss(_cache);
                      return true;
                  }
              }
              var header = new Object();
              if (isJson == true){
                  header['Content-Type'] = "application/json";
              }
              http("POST",header);
          },
          delete:function () {
              http("DELETE");
          },
          put:function () {
              http("PUT");
          }
      }

  },

 

app.event("#getToken", "click", function () {
    app.ajax("/project/api/getToken", {type:"1"}, function (e) {
        app.log(e);
        if (e.code == 1) {
            
        }
    }).post();
});

java web开发图片上传&虚拟目录配置

最近使用java开发一个APP应用的管理系统后台,涉及到编辑信息上传图片的功能,这里使用了UE编辑器,国产的;

UE上传图片的功能集成在了一个叫做image.js的文件中:

/*
 * 本地上传
 * */
var Upload = {
    showCount: 0,
    uploadTpl: '<div class="edui-image-upload%%">' +
        '<span class="edui-image-icon"></span>' +
        '<form class="edui-image-form" method="post" enctype="multipart/form-data" target="up">' +
        '<input style=\"filter: alpha(opacity=0);\" class="edui-image-file" type="file" hidefocus name="upfile" accept="image/gif,image/jpeg,image/png,image/jpg,image/bmp"/>' +
        '</form>' +

        '</div>',
    init: function (editor, $w) {
        var me = this;

        me.editor = editor;
        me.dialog = $w;
        me.render(".edui-image-local", 1);
        me.config(".edui-image-upload1");
        me.submit();
        me.drag();

        $(".edui-image-upload1").hover(function () {
            $(".edui-image-icon", this).toggleClass("hover");
        });

        if (!(UM.browser.ie && UM.browser.version <= 9)) {
            $(".edui-image-dragTip", me.dialog).css("display", "block");
        }


        return me;
    },
    render: function (sel, t) {
        var me = this;

        $(sel, me.dialog).append($(me.uploadTpl.replace(/%%/g, t)));

        return me;
    },
    config: function (sel) {
        var me = this,
            url=me.editor.options.imageUrl;

        url=url + (url.indexOf("?") == -1 ? "?" : "&") + "editorid="+me.editor.id;//初始form提交地址;

        $("form", $(sel, me.dialog)).attr("action", url);

        return me;
    },
    uploadComplete: function(r){
        var me = this;
        //这里使用一个过滤的方法,java后台返回的是json数据,但是到这里发现有<pre>的标签;
        log(r)
        if(r.indexOf("</pre>") > 0){
            var _start = r.indexOf(">") + 1;
            var _end = r.indexOf("<",_start);
            r = r.substring(_start,_end);
            log(r)
        }
        //过滤结束

        try{
            var json = eval('('+r+')');
            //这里调用了callback的方法,第3个参数是传递过去的图片地址,由服务器返回;
            //第4个参数是服务器返回的状态码
            Base.callback(me.editor, me.dialog, json.data.url, json.code);
        }catch (e){
            var lang = me.editor.getLang('image');
            Base.callback(me.editor, me.dialog, '', (lang && lang.uploadError) || 'Error!');
        }
    }}

图片上传成功,调用了callback的方法处理图片,需要作小小的改动:

callback: function (editor, $w, url, code) {
     //这里做了小小的改动,原代码是判断success字符串,由于我的Java返回的是一个类似于{code:1,error:error}对象,所以我改成了int类型作为判断,之后的代码都不需要操作了。
    if (code == 1) {
        //显示图片计数+1
        Upload.showCount++;
        var $img = $("<img src='" + editor.options.imagePath + url + "' class='edui-image-pic' />"),
            $item = $("<div class='edui-image-item edui-image-upload-item'><div class='edui-image-close'></div></div>").append($img);

        if ($(".edui-image-upload2", $w).length < 1) {
            $(".edui-image-content", $w).append($item);

            Upload.render(".edui-image-content", 2)
                .config(".edui-image-upload2");
        } else {
            $(".edui-image-upload2", $w).before($item).show();
        }

        $img.on("load", function () {
            Base.scale(this, 120);
            Base.close($(this));
            $(".edui-image-content", $w).focus();
        });

    } else {
        currentDialog.showTip( code );
        window.setTimeout( function () {

            currentDialog.hideTip();

        }, 3000 );
    }

    Upload.toggleMask();

}

接下来就是映射tomcat虚拟目录,在tomcat的目录下找到conf目录:

/home/apache-tomcat-8.0.45/conf/Catalina/localhost

在localhost目录下创建一个xml文件,文件的名字会与url的路径同步,所以取名字要注意点,假如你创建了一个

upload.xml的文件,里面的内容是:

<?xml version=”1.0″ encoding=”UTF-8″?>
<!–文件名跟url路径需保持一致–>
<!–如果文件名:upload.xml,那么你访问的url地址应该是:http://ip:port/upload/images…. –>
<!–http://localhost:8081/upload/images/20170901/1504228001551.jpg–>
<Context
docBase=”/upload”
reloadable=”true”>
</Context>

那么你访问这个目录下的资源时,url应该输入:

http://ip:port/upload/resrouce

 

1236