初探plus.nativeObj.View

對於技術不高的我來說，一直在忙碌中，一直在學習，突然發現html5+ plus.nativeObj有了新的東東。

官方文檔： http://www.html5plus.org/doc/zh_cn/nativeobj.html

 

nativeObj解析： http://ask.dcloud.net.cn/article/665

 

用一些時間去體驗了一下，主要是一個 圖片預覽 的簡單栗子

 

html:

 

 

NativeImg.js

(function($, undefined) {
    var NativeImg = function() {
        var that = this;
        this.tapObj = {};
        $.plusReady(function() {
            that.init();
            that.initEvent();
        });

    };
    var proto = NativeImg.prototype;
    
    proto.init = function() {
        this.view = new plus.nativeObj.View('ImgView', {
            top: '0px',
            left: '0px',
            height: '100%',
            width: '100%'
        });
        this.bitmap = new plus.nativeObj.Bitmap('BitImg');
    };
    proto.initEvent = function() {
        var self = this;
        
        $(document.body).on('tap', 'img[data-nimg-src]', function(e) {
            var g = this.getAttribute('data-nimg-room');
            if(g){
                if(g != self.g){
                    self.g = g;
                    self.room = document.querySelectorAll("img[data-nimg-src][data-nimg-room='" + g + "']");
                }
                for(var i in self.room){
                    if(self.room[i] == e.target){
                        self.imgIndex = i;
                        break;
                    }
                }
            }else{
                self.room = [(e.target)];
                
                self.imgIndex = 0;
            }
            
            self.open();
            return false;
        });

        this.view.addEventListener('touchstart', function(e) {
            self.view.interceptTouchEvent(true);
            var tapObj = self.tapObj;
            tapObj.pageX = e.pageX;
            tapObj.pageY = e.pageY;
            tapObj.clientX = e.clientX;
            tapObj.clientY = e.clientY;
            self.isStartTime = +new Date();

        }, false);

        this.view.addEventListener('touchend', function(e) {
            self.view.interceptTouchEvent(true);
            var tapObj = self.tapObj;
            self.isStartTime = +new Date() - self.isStartTime;
            tapObj.distanceX = tapObj.pageX - e.pageX;
            tapObj.distanceY = tapObj.pageY - e.pageY;
            self.handler(tapObj, e);
        }, false);

    };

    proto.handler = function(o, e) {
        var self = this;
        if(self.isStartTime > 500) return;
        if(self.isStartTime < 200 && Math.abs(o.distanceX) < 2 && Math.abs(o.distanceY) < 2) {
            self.view.clear();
        }
        if(o.distanceX < -100 && Math.abs(o.distanceY) < 70){
            console.log('右滑');
            self.back();
            
        }
        if(o.distanceX > 100 && Math.abs(o.distanceY) < 70){
            console.log('左滑');
            self.next();
        }
        

    }
    
    proto.next = function(){
        var i = this.imgIndex+1;
        if(i>=this.room.length){
            i = 0;
        }
        this.imgIndex = i;
        this.open();
    }
    
    proto.back = function(){
        var i = this.imgIndex-1;
        if(i<0){
            i = this.room.length-1;
        }
        this.imgIndex = i;
        this.open();
    }
    
    
    
    proto.open = function() {
        var self = this;
        var img = self.room[self.imgIndex];
        
        var src = plus.io.convertLocalFileSystemURL(img.getAttribute('data-nimg-src') || img.src);
        if(src.indexOf('file://') < 0) {
            src = 'file://' + src;
        }
        var text = img.getAttribute('data-nimg-text');
        
        this.bitmap.load(src, function() {
            self.view.drawBitmap(self.bitmap);
            self.view.drawText(text, {
                top: '80%',
                left: '0px',
                width: '100%',
                height: '20%'
            }, {
                color: '#FFFFFF',
                size: '18px'
            })
            self.view.show();
        }, function(e) {
            console.log('加載圖片失敗：' + JSON.stringify(e));
        });
    };

    var nImg = null;
    $.NativeImg = function() {
        if(!nImg) {
            nImg = new NativeImg();
        }
        return nImg;
    };
    $.getNImg = function() {
        return nImg;
    }
}(mui))

 如果您要加載網絡上的圖片，那么需要先下載再拿到本地圖片地址，可以參考mui下載例子