Javascript 失败的Canvas 360 jquery插件

这是我最接近的时刻了

但是当加载到图像时，它会被破坏——只有第二个画布会呈现

问题似乎发生在img.load回调期间

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>

1.
2.

js

（函数（$）{
var默认值={
string1:“你好”，
第二条：“世界！”
};
var方法={
初始化：函数（选项）{
如果（选项）{
$.extend（默认值、选项）；
}
//log（“默认值”，默认值）；
方法：启动（本）；
//log（defaults.string1+defaults.string2）；
},
测试：函数（arg）{
日志（“测试：+arg.args”）；
log（“args:+defaults.string1+defaults.string2”）；
},
reInit：函数（）{
this.loaded=0；//重置
这个。render（）；
此.load360Image（false）；
},
setCursor：函数（cursor）{
document.body.style.cursor=光标；
},
渲染：函数（）{
//加载新渲染
this.fileCount=this.el.data（“文件计数”）；
this.path=this.el.data（“文件路径”）；
此.startFrame=10；
//创建img列表
this.imgList=[]；
/*
对于（i=1；i=5）{
自我更新360（dx/abs\U dx）；
self.start_x=event.rawX；
}
}
self.stage.onMouseUp=函数（事件）{
self.stage.onMouseMove=null；
self.stage.onMouseUp=null；
self.setCursor（“指针”）；
core.changeOnStage（这个，self.currentFrame）；
}
self.setCursor（“w-resize”）；
}
此.setCursor（“自动”）；
},
update360:函数（dir）{
this.currentFrame+=dir；
如果（此.currentFrame<0）{
this.currentFrame=this.totalFrames-1；
}else if（this.currentFrame>this.totalFrames-1）{
此.currentFrame=0；
}
this.bmp.image=this.images[this.currentFrame]；
}
};
$.fn.dataTable=函数（方法）{
var args=参数；
var$this=这个；
返回此。每个（函数（）{
if（方法[方法]）{
返回方法[method].apply（$this，Array.prototype.slice.call（args，1））；
}else if（typeof方法=='object'| |！方法）{
return methods.init.apply（$this，Array.prototype.slice.call（args，0））；
}否则{
$.error（'Method'+Method+'在jQuery.plugin上不存在'）；
}
});
};
})（jQuery）；
//初始化
$（文档）.ready（函数（）{
//创建画布的多个实例
$（'[data init=“table”]'）。每个（函数（索引）{
var实例=$（this.dataTable（）；
log（“实例”，实例）；
});
$（“#2”）.dataTable（“测试”{
args：“测试args已通过”
});
});

这是因为每次调用时，您都在重新定义相同的对象，该对象在第一次调用时分配第一个画布，然后在第二次调用时将其更改为第二个画布

您需要重新格式化代码，以便每次调用

方法.init

，它都会创建一个新对象

---

在这篇文章中，你会发现一种快速而肮脏的方式，只是为了说明这一点

不用

插件

方法，你可以把它变成一个

小部件

。你不需要太多的改变，它会更灵活。请参见此处，您的代码几乎没有更改：

 $(function () {

    $.widget("custom.threesixty", {
        // default options
        options: {

        },

        // the constructor
        _create: function () {
            this.start(this.element);
        },


        _refresh: function () {

        },


        // events bound via _on are removed automatically
        // revert other modifications here
        _destroy: function () {

        },

        // _setOptions is called with a hash of all options that are changing
        // always refresh when changing options
        _setOptions: function () {
            // _super and _superApply handle keeping the right this-context
            this._superApply(arguments);
            this._refresh();
        },

        // _setOption is called for each individual option that is changing
        _setOption: function (key, value) {

            this._super(key, value);
        },
        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;
        },
        reInit: function () {
            this.loaded = 0; //reset
            this.render();
            this.load360Image(false);
        },
        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(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();
            //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
            self.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;

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

            self.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");
                    self.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];
        }
    });
    $('[data-init="table"]').threesixty()
    $("#trigger").click(function () {
        console.log("try other method");
        $("#two").data("file-path", "mobile4").data("file-count", 20);
        $("#two").threesixty("reInit");
    });
})

所以你可以这样做：

$(element).threesixty(method, args)

$(element).threesixty('instance')//to access the instance
$(element).threesixty('start')//to call start method
$(element).threesixty('option', key, value)//to set options one it's instantiated
$(element).threesixty({
    option1: value,
    option2: value,
});//to set options when creating it

---

等等。

任何建议-更改-解决这个问题很紧急这很紧急-为什么它无法加载多个实例？我有一些外部函数-这些函数会被插件调用-但是它们现在随着代码重构的方式而中断。特别是在调用reInit时——在渲染时——代码无法再对选择器的数据属性进行加密。-如果我需要更改路径，我使用了reInits方法——但现在随着您所做的新实现而中断。。。我试着设置新的this.el=that——但它把我引入了一个兔子洞——发生了什么事。。。我只需要reInits选择一个新的映像路径，然后重新初始化应用程序。我告诉过你，它既快又脏。依我看，你的代码需要认真清理。对于这个特殊的问题，这是因为我的实现在每次调用时都创建了一个新的对象实例。您想要的是附加一个新实例，然后在每次调用时重用它。例如，您可以将其附加到调用部分的画布上：

$this[0]。\uu superView=$this[0]。\uu superView | |新方法（$this）；var meth=$this[0]。\uuu superView。但您也可以将这些对象存储在全局数组中或任何您想要的位置。看，有一个赏金出来做你提到的大清理
$(element).threesixty('instance')//to access the instance
$(element).threesixty('start')//to call start method
$(element).threesixty('option', key, value)//to set options one it's instantiated
$(element).threesixty({
    option1: value,
    option2: value,
});//to set options when creating it