I am creating a 360 degree canvas app. It works well when there is just one instance, but the problem incurs when trying to invoke multiple instances of the canvas.
I am building from the ticked tooltip plugin example.
How to create a jQuery plugin with methods?
I am wondering if its falling down - because in the plugin I am not doing this.each
-- here is some of the code in a jsfiddle - but its missing image frames https://jsfiddle.net/mxx67b9m/9/
HTML Example
<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 invoke
$('[data-init="canvas360"]').each(function(index) {
$(this).superView();
});
JQuery Plugin in the works
(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);
