Javascript 使用此JQuery画布插件调用多个实例
我正在创建一个360度画布应用程序。当只有一个实例时，它工作得很好，但是当尝试调用画布的多个实例时，就会出现问题 我是根据勾选的工具提示插件示例构建的 我想知道它是否会崩溃，因为在插件中我没有这样做 --下面是JSFIDLE中的一些代码，但缺少图像帧 HTML示例 JQuery插件正在开发中Javascript 使用此JQuery画布插件调用多个实例,javascript,jquery,canvas,jquery-plugins,Javascript,Jquery,Canvas,Jquery Plugins,我正在创建一个360度画布应用程序。当只有一个实例时，它工作得很好，但是当尝试调用画布的多个实例时，就会出现问题 我是根据勾选的工具提示插件示例构建的 我想知道它是否会崩溃，因为在插件中我没有这样做 --下面是JSFIDLE中的一些代码，但缺少图像帧 HTML示例 JQuery插件正在开发中 （函数（$）{ var canvasApp={ reInit:function（）{ this.loaded=0；//重置 这个。render（）； 此.load360Image（false）； },
（函数（$）{
var canvasApp={
reInit:function（）{
this.loaded=0；//重置
这个。render（）；
此.load360Image（false）；
},
setCursor：函数（cursor）{
document.body.style.cursor=光标；
},
render:function（）{
//加载新渲染
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（“指针”）；
app.changeOnStage（这个，self.currentFrame）；
}
self.setCursor（“w-resize”）；
}
此.setCursor（“自动”）；
},
update360:函数（dir）{
这个.currentFrame+=dir；
if（this.currentFramethis.totalFrames-1）{
此.currentFrame=0；
}
this.bmp.image=this.images[this.currentFrame]；
}
};
var方法={
初始化：函数（选项）{
canvasApp.start（$（此））；
},
reInits:函数（args）{
canvasApp.reInit（$（本））；
},
自旋：函数（速度、回调）{
//控制台日志（“速度”，速度）；
canvasApp.revolveOnce（函数（）{
//console.log（“REV:：END”）；
回调（“旋转完成”）；
}，速度）；
}
};
$.fn.superView=函数（方法选项）{
if（方法[方法选项]）{
返回方法[methodOrOptions].apply（this，Array.prototype.slice.call（arguments，1））；
}else if（方法选项的类型=='object'| |！方法选项）{
//默认为“init”
return methods.init.apply（这是参数）；
}否则{
$.error（'Method'+methodOrOptions+'在jQuery.superView上不存在）；
}
};
})（jQuery）；
<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.
（函数（$）{
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已通过”
});
});
$('[data-init="canvas360"]').each(function(index) {
$(this).superView();
});
(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);
<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>
(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"
});
});