使用此JQuery Canvas插件调用多个实例

时间:2015-06-30 11:50:40

标签: javascript jquery canvas jquery-plugins

我正在创建一个360度画布应用程序。当只有一个实例时它很有效,但是在尝试调用画布的多个实例时会出现问题。

我正在使用勾选的工具提示插件示例构建。

How to create a jQuery plugin with methods?

我想知道它是否会倒下 - 因为在插件中我不是在做这个。

- 这是jsfiddle中的一些代码 - 但它缺少图像帧 https://jsfiddle.net/mxx67b9m/9/

HTML示例

      <canvas data-init="canvas360" id="render1" data-icon-path="images/" width="520" height="520" data-start-frame=0 data-file-count=22 data-file-path="watch1/"></canvas>

JS调用

$('[data-init="canvas360"]').each(function(index) {
  $(this).superView();
});

JQuery插件正在开发中

(function( $ ){


        var canvasApp = {
          reInit: function(){
            this.loaded = 0;//reset
            this.render();
            this.load360Image(false);
          },
          setCursor: function(cursor){
            document.body.style.cursor = cursor;
          },
          render: function(){
            //load in a new render
            this.fileCount = this.el.data("file-count");
            this.path = this.el.data("file-path");
            this.startFrame = 10;

            //create img list
            this.imgList = [];
            for (i = 1; i <= this.fileCount; i++) { 
              this.imgList.push(this.path+i+".png");
            }

            this.totalFrames = this.imgList.length;
          },
          start: function(element){ 
            var self = this;
            console.log(element);
            this.el = element;

            this.canvas = this.el[0];
            if (!this.canvas || !this.canvas.getContext){ 
              return;
            }

            this.stage = new createjs.Stage(this.canvas);  
            this.stage.enableMouseOver(true);
            this.stage.mouseMoveOutside = true; 
            createjs.Touch.enable(this.stage);

            this.images = [];
            this.loaded = 0;
            this.currentFrame = 0
            this.rotate360Interval;
            this.start_x;

            this.bg = new createjs.Shape();
            this.stage.addChild(this.bg);  

            this.bmp = new createjs.Bitmap();    
            this.stage.addChild(this.bmp);

            var myTxt = new createjs.Text("HTC One", '24px Ubuntu', "#ffffff");
            myTxt.x = myTxt.y =20;
            myTxt.alpha = 0.08;
            this.stage.addChild(myTxt);

            this.setCursor("progress");

            this.render();
            this.load360Image(true);

            // TICKER
            createjs.Ticker.addEventListener("tick", function(event){ 
              self.stage.update();
            });
            createjs.Ticker.setFPS(60);
            createjs.Ticker.useRAF = true;
          },
          load360Image: function(spin) {
            var img = new Image();
            //img.crossOrigin = "Anonymous";

            img.src = this.imgList[this.loaded];

            this.img360Loaded(img, spin);
            this.images[this.loaded] = img;   
          },
          img360Loaded: function(img, spin){

            var that = this;
            img.onload = function(event){
              that.loaded++;        
              that.bg.graphics.clear()
              that.bg.graphics.beginFill("#222").drawRect(0,0,that.stage.canvas.width * that.loaded/that.totalFrames, that.stage.canvas.height);
              that.bg.graphics.endFill();

              if(that.loaded==that.totalFrames){
                 that.start360(spin); 
              }else{
                that.load360Image(spin);
              }
            }
          },
          start360: function(spin) {
            this.setCursor("none");

            // 360 icon
            var iconImage = new Image();
                //iconImage.crossOrigin = "Anonymous";
                iconImage.src = this.el.data("icon-path")+"360.png";
                this.iconLoaded(iconImage);

            // update-draw
            this.update360(0);

            if(spin){
              this.revolveOnce(function(){
                console.log("done");
              }, 25);
            }
            this.setCursor("auto");
          },
          revolveOnce: function(callback, speed){
              var self = this;
              // first rotation
              this.rotate360Interval = setInterval(function(){ 
                if(self.currentFrame===self.totalFrames-1) {
                  clearInterval(self.rotate360Interval);
                  self.addNavigation();
                }
                self.update360(1);

                if(self.currentFrame===self.totalFrames-1) {
                  callback();
                }
              }, speed);    
          },
          iconLoaded: function(iconImage) {
            var self = this;
            iconImage.onload = function(event){
              var iconBmp = new createjs.Bitmap();
              iconBmp.image = event.target;
              iconBmp.x = 20;
              iconBmp.y = self.canvas.height - iconBmp.image.height - 20;
              self.stage.addChild(iconBmp);      
            }
          },
          setFrame: function(newFrame){
            this.bmp.image = this.images[newFrame];
          },
          addNavigation: function() {

            var self = this;

            this.stage.onMouseOver = function(event) {
              self.setCursor("pointer");
            }

            this.stage.onMouseDown = function(event) {
                self.start_x = event.rawX;
                self.stage.onMouseMove = self.mouseMoved;

                self.stage.onMouseMove = function(event) {
                    var dx = event.rawX - self.start_x;
                    var abs_dx = Math.abs(dx);

                    if(abs_dx>5) {
                      self.update360(dx/abs_dx);
                      self.start_x = event.rawX;
                    }
                }

                self.stage.onMouseUp = function(event) {
                  self.stage.onMouseMove = null;
                  self.stage.onMouseUp = null;
                  self.setCursor("pointer");
                  app.changeOnStage(this, self.currentFrame);
                }

                self.setCursor("w-resize");        
            }


            this.setCursor("auto");
          },  
          update360: function(dir) {
            this.currentFrame+=dir;

            if(this.currentFrame<0){
              this.currentFrame = this.totalFrames-1;
            }
            else if(this.currentFrame>this.totalFrames-1){
              this.currentFrame = 0;
            }
            this.bmp.image = this.images[this.currentFrame];
          }
        };


    var methods = {
        init : function(options) {
            canvasApp.start($(this));
        },
        reInits: function(args) {
            canvasApp.reInit($(this));
        },
        spin : function(speed, callback) {
            //console.log("speed", speed);
            canvasApp.revolveOnce(function(){
              //console.log("REV:: END");
              callback("revolution complete");
            },speed);
        }
    };

    $.fn.superView = function(methodOrOptions) {
        if ( methods[methodOrOptions] ) {
            return methods[ methodOrOptions ].apply( this, Array.prototype.slice.call( arguments, 1 ));
        } else if ( typeof methodOrOptions === 'object' || ! methodOrOptions ) {
            // Default to "init"
            return methods.init.apply( this, arguments );
        } else {
            $.error( 'Method ' +  methodOrOptions + ' does not exist on jQuery.superView' );
        }    
    };

})(jQuery);

1 个答案:

答案 0 :(得分:0)

这就像我来的那样......

但是在图片中加载时会破坏 - 只有第二个画布会出现?

https://jsfiddle.net/7a4738jo/23/

HTML ..

<script type="text/javascript" src="https://code.createjs.com/easeljs-0.6.0.min.js"></script>
<canvas id="one" data-init="table" width="465" height="465">1</canvas>
<canvas id="two" data-init="table" width="465" height="465">2</canvas>

... JS

(function ($) {
    var defaults = {
        string1: "hello ",
        string2: "world!"
    };
    var methods = {
        init: function (options) {
            if (options) {
                $.extend(defaults, options);
            }
            //console.log("defaults", defaults);
            methods.start(this);
            //console.log(defaults.string1 + defaults.string2);
        },
        test: function (arg) {
            console.log("test: " + arg.args);
            console.log("args: " + defaults.string1 + defaults.string2);
        },
        reInit: function () {
            this.loaded = 0; //reset
            this.render();
            this.load360Image(false);
        },
        setCursor: function (cursor) {
            document.body.style.cursor = cursor;
        },
        render: function () {
            //load in a new render
            this.fileCount = this.el.data("file-count");
            this.path = this.el.data("file-path");
            this.startFrame = 10;

            //create img list
            this.imgList = [];

            /*
            for (i = 1; i <= this.fileCount; i++) {
                this.imgList.push(this.path + i + ".png");
            }*/

            this.imgList = ["http://jsrun.it/assets/N/b/D/X/NbDXj.jpg", 
                   "http://jsrun.it/assets/f/K/7/y/fK7yE.jpg", 
                   "http://jsrun.it/assets/j/U/q/d/jUqdG.jpg", 
                   "http://jsrun.it/assets/q/o/4/j/qo4jP.jpg", 
                   "http://jsrun.it/assets/i/Q/e/1/iQe1f.jpg", 
                   "http://jsrun.it/assets/5/k/y/R/5kyRi.jpg", 
                   "http://jsrun.it/assets/x/T/I/h/xTIhA.jpg", 
                   "http://jsrun.it/assets/4/X/G/F/4XGFt.jpg", 
                   "http://jsrun.it/assets/6/7/n/r/67nrO.jpg", 
                   "http://jsrun.it/assets/k/i/r/8/kir8T.jpg", 
                   "http://jsrun.it/assets/2/3/F/q/23Fqt.jpg", 
                   "http://jsrun.it/assets/c/l/d/5/cld59.jpg", 
                   "http://jsrun.it/assets/e/J/O/f/eJOf1.jpg", 
                   "http://jsrun.it/assets/o/j/Z/x/ojZx4.jpg", 
                   "http://jsrun.it/assets/w/K/2/m/wK2m3.jpg", 
                   "http://jsrun.it/assets/w/K/2/m/wK2m3.jpg", 
                   "http://jsrun.it/assets/4/b/g/V/4bgVf.jpg", 
                   "http://jsrun.it/assets/4/m/1/8/4m18z.jpg", 
                   "http://jsrun.it/assets/4/w/b/F/4wbFX.jpg", 
                   "http://jsrun.it/assets/4/k/T/G/4kTGQ.jpg", 
                   "http://jsrun.it/assets/s/n/C/r/snCrr.jpg", 
                   "http://jsrun.it/assets/7/f/H/u/7fHuI.jpg", 
                   "http://jsrun.it/assets/v/S/d/F/vSdFm.jpg", 
                   "http://jsrun.it/assets/m/g/c/S/mgcSp.jpg", 
                   "http://jsrun.it/assets/t/L/t/P/tLtPF.jpg", 
                   "http://jsrun.it/assets/j/7/e/H/j7eHx.jpg", 
                   "http://jsrun.it/assets/m/o/8/I/mo8Ij.jpg", 
                   "http://jsrun.it/assets/n/P/7/h/nP7ht.jpg", 
                   "http://jsrun.it/assets/z/f/K/S/zfKSP.jpg", 
                   "http://jsrun.it/assets/2/3/4/U/234U6.jpg", 
                   "http://jsrun.it/assets/d/Z/y/m/dZymk.jpg"];


            this.totalFrames = this.imgList.length;
        },
        start: function (element) {
            var self = this;
            console.log(">>>element",element);
            this.el = element;

            this.canvas = this.el[0];
            if (!this.canvas || !this.canvas.getContext) {
                return;
            }
            console.log(">>>methods.canvas",this.canvas);

            this.stage = new createjs.Stage(this.canvas);
            this.stage.enableMouseOver(true);
            this.stage.mouseMoveOutside = true;
            createjs.Touch.enable(methods.stage);

            this.images = [];
            this.loaded = 0;
            this.currentFrame = 0
            this.rotate360Interval;
            this.start_x;

            this.bg = new createjs.Shape();
            this.stage.addChild(this.bg);

            this.bmp = new createjs.Bitmap();
            this.stage.addChild(this.bmp);

            var myTxt = new createjs.Text("HTC One", '24px Ubuntu', "#ffffff");
            myTxt.x = myTxt.y = 20;
            myTxt.alpha = 0.08;
            this.stage.addChild(myTxt);

            this.setCursor("progress");

            this.render();
            //console.log(this.el[0]);
            this.load360Image(true);

            // TICKER
            createjs.Ticker.addEventListener("tick", function (event) {
                self.stage.update();
            });
            createjs.Ticker.setFPS(60);
            createjs.Ticker.useRAF = true;

            return this.canvas;
        },
        load360Image: function (spin) {
            var img = new Image();
            //img.crossOrigin = "Anonymous";

            img.src = this.imgList[this.loaded];

            this.img360Loaded(img, spin);
            this.images[this.loaded] = img;
        },
        img360Loaded: function (img, spin) {
            //console.log("LOAD IMG", this.el[0], img);
            var that = this;
            img.onload = function (event) {
                //console.log(img);

                that.loaded++;
                that.bg.graphics.clear()
                that.bg.graphics.beginFill("#222").drawRect(0, 0, that.stage.canvas.width * that.loaded / that.totalFrames, that.stage.canvas.height);
                that.bg.graphics.endFill();


                if (that.loaded == that.totalFrames) {
                    that.start360(spin);
                } else {
                    that.load360Image(spin);
                }

                //console.log(">>LOAD IMG DONE", that.el[0]);
            }
        },
        start360: function (spin) {
            this.setCursor("none");

            // 360 icon
            var iconImage = new Image();
            //iconImage.crossOrigin = "Anonymous";
            iconImage.src = this.el.data("icon-path") + "360.png";
            this.iconLoaded(iconImage);

            // update-draw
            this.update360(0);

            if (spin) {
                this.revolveOnce(function () {
                    //console.log("done");
                }, 25);
            }
            this.setCursor("auto");
        },
        revolveOnce: function (callback, speed) {
            var self = this;
            // first rotation
            this.rotate360Interval = setInterval(function () {
                if (self.currentFrame === self.totalFrames - 1) {
                    clearInterval(self.rotate360Interval);
                    self.addNavigation();
                }
                self.update360(1);

                if (self.currentFrame === self.totalFrames - 1) {
                    callback();
                }
            }, speed);
        },
        iconLoaded: function (iconImage) {
            var self = this;
            iconImage.onload = function (event) {
                var iconBmp = new createjs.Bitmap();
                iconBmp.image = event.target;
                iconBmp.x = 20;
                iconBmp.y = self.canvas.height - iconBmp.image.height - 70;
                self.stage.addChild(iconBmp);
            }
        },
        setFrame: function (newFrame) {
            this.bmp.image = this.images[newFrame];
        },
        addNavigation: function () {

            var self = this;

            this.stage.onMouseOver = function (event) {
                self.setCursor("pointer");
            }

            this.stage.onMouseDown = function (event) {
                self.start_x = event.rawX;
                self.stage.onMouseMove = self.mouseMoved;

                self.stage.onMouseMove = function (event) {
                    var dx = event.rawX - self.start_x;
                    var abs_dx = Math.abs(dx);

                    if (abs_dx > 5) {
                        self.update360(dx / abs_dx);
                        self.start_x = event.rawX;
                    }
                }

                self.stage.onMouseUp = function (event) {
                    self.stage.onMouseMove = null;
                    self.stage.onMouseUp = null;
                    self.setCursor("pointer");
                    core.changeOnStage(this, self.currentFrame);
                }

                self.setCursor("w-resize");
            }


            this.setCursor("auto");
        },
        update360: function (dir) {
            this.currentFrame += dir;

            if (this.currentFrame < 0) {
                this.currentFrame = this.totalFrames - 1;
            } else if (this.currentFrame > this.totalFrames - 1) {
                this.currentFrame = 0;
            }
            this.bmp.image = this.images[this.currentFrame];
        }
    };
    $.fn.dataTable = function (method) {
        var args = arguments;
        var $this = this;
        return this.each(function () {
            if (methods[method]) {
                return methods[method].apply($this, Array.prototype.slice.call(args, 1));
            } else if (typeof method === 'object' || !method) {
                return methods.init.apply($this, Array.prototype.slice.call(args, 0));
            } else {
                $.error('Method ' + method + ' does not exist on jQuery.plugin');
            }
        });
    };

})(jQuery);


// Init
$(document).ready(function () {
    //create multiple instances of canvas
    $('[data-init="table"]').each(function (index) {
        var instance = $(this).dataTable();
        console.log("instance", instance);
    });

    $("#two").dataTable("test", {
        args: "test args passed"
    });
});