diff --git a/dist/lucky-card.js b/dist/lucky-card.js index 58b265c..be3bb1f 100644 --- a/dist/lucky-card.js +++ b/dist/lucky-card.js @@ -8,11 +8,12 @@ * Licensed under the MIT license: * http://www.opensource.org/licenses/mit-license.php * - * Version: 1.0.1 + * Version: 1.0.3 * * Update: * 1.0.1 Fixed a bug with "coverImg".(Thanks to dongnanyanhai reported the problem) 2015-11-10 * 1.0.2 Fixed a bug when page can be scrolling.(Thanks to agileago's report & Tomatoo's pull) 2016-03-17 + * 1.0.3 Fixed some bugs. 2017-08-17 * */ ; @@ -48,7 +49,7 @@ }; function _calcArea(ctx, callback, ratio) { - var pixels = ctx.getImageData(0, 0, 300, 100); + var pixels = ctx.getImageData(0, 0, this.cWidth, this.cHeight); var transPixels = []; _forEach(pixels.data, function(item, i) { var pixel = pixels.data[i + 3]; @@ -77,18 +78,18 @@ * touchstart/mousedown event handler */ function _startEventHandler(event) { - this.cardDiv.style.opacity = 1; + event.preventDefault(); this.moveEventHandler = _moveEventHandler.bind(this); this.cover.addEventListener(this.events[1],this.moveEventHandler,false); this.endEventHandler = _endEventHandler.bind(this); document.addEventListener(this.events[2],this.endEventHandler,false); - event.preventDefault(); }; /** * touchmove/mousemove event handler */ function _moveEventHandler(event) { + event.preventDefault(); var evt = this.supportTouch?event.touches[0]:event; var coverPos = this.cover.getBoundingClientRect(); var pageScrollTop = document.documentElement.scrollTop || document.body.scrollTop; @@ -101,18 +102,16 @@ this.ctx.globalCompositeOperation = "destination-out"; this.ctx.arc(mouseX, mouseY, 10, 0, 2 * Math.PI); this.ctx.fill(); - - event.preventDefault(); }; /** * touchend/mouseup event handler */ function _endEventHandler(event) { - if (this.opt.callback && typeof this.opt.callback === 'function') _calcArea(this.ctx, this.opt.callback, this.opt.ratio); + event.preventDefault(); + if (this.opt.callback && typeof this.opt.callback === 'function') _calcArea.call(this,this.ctx, this.opt.callback, this.opt.ratio); this.cover.removeEventListener(this.events[1],this.moveEventHandler,false); document.removeEventListener(this.events[2],this.endEventHandler,false); - event.preventDefault(); }; /** @@ -136,6 +135,7 @@ this.ctx.fillRect(0, 0, this.cover.width, this.cover.height); } this.scratchDiv.appendChild(this.cover); + this.cardDiv.style.opacity = 1; } /** @@ -160,6 +160,9 @@ */ LuckyCard.prototype.clearCover = function() { this.ctx.clearRect(0, 0, this.cover.width, this.cover.height); + this.cover.removeEventListener(this.events[0],this.startEventHandler); + this.cover.removeEventListener(this.events[1],this.moveEventHandler); + this.cover.removeEventListener(this.events[2],this.endEventHandler); }; diff --git a/dist/lucky-card.min.js b/dist/lucky-card.min.js index 53f9da7..e139b15 100644 --- a/dist/lucky-card.min.js +++ b/dist/lucky-card.min.js @@ -1,2 +1,2 @@ -/*! lucky-card 1.0.0 https://github.com/Franslee/lucky-card 2016-07-06 */ -!function(a,b,c){"use strict";function d(a,b){this.cover=null,this.ctx=null,this.scratchDiv=null,this.cardDiv=null,this.cHeight=0,this.cWidth=0,this.supportTouch=!1,this.events=[],this.startEventHandler=null,this.moveEventHandler=null,this.endEventHandler=null,this.opt={coverColor:"#C5C5C5",coverImg:"",ratio:.8,callback:null},this.init(a,b)}function e(a,b,c){var d=a.getImageData(0,0,300,100),e=[];f(d.data,function(a,b){var c=d.data[b+3];0===c&&e.push(c)}),e.length/d.data.length>c&&b&&"function"==typeof b&&b()}function f(a,b){return Array.prototype.forEach.call(a,function(a,c){b(a,c)})}function g(){var a=b.createElement("canvas");return!(!a.getContext||!a.getContext("2d"))}function h(a){this.cardDiv.style.opacity=1,this.moveEventHandler=i.bind(this),this.cover.addEventListener(this.events[1],this.moveEventHandler,!1),this.endEventHandler=j.bind(this),b.addEventListener(this.events[2],this.endEventHandler,!1),a.preventDefault()}function i(a){var c=this.supportTouch?a.touches[0]:a,d=this.cover.getBoundingClientRect(),e=b.documentElement.scrollTop||b.body.scrollTop,f=b.documentElement.scrollLeft||b.body.scrollLeft,g=c.pageX-d.left-f,h=c.pageY-d.top-e;this.ctx.beginPath(),this.ctx.fillStyle="#FFFFFF",this.ctx.globalCompositeOperation="destination-out",this.ctx.arc(g,h,10,0,2*Math.PI),this.ctx.fill(),a.preventDefault()}function j(a){this.opt.callback&&"function"==typeof this.opt.callback&&e(this.ctx,this.opt.callback,this.opt.ratio),this.cover.removeEventListener(this.events[1],this.moveEventHandler,!1),b.removeEventListener(this.events[2],this.endEventHandler,!1),a.preventDefault()}d.prototype.createCanvas=function(){if(this.cover=b.createElement("canvas"),this.cover.id="cover",this.cover.height=this.cHeight,this.cover.width=this.cWidth,this.ctx=this.cover.getContext("2d"),this.opt.coverImg){var a=this,c=new Image;c.src=this.opt.coverImg,c.onload=function(){a.ctx.drawImage(c,0,0,a.cover.width,a.cover.height)}}else this.ctx.fillStyle=this.opt.coverColor,this.ctx.fillRect(0,0,this.cover.width,this.cover.height);this.scratchDiv.appendChild(this.cover)},d.prototype.eventDetect=function(){"ontouchstart"in a&&(this.supportTouch=!0),this.events=this.supportTouch?["touchstart","touchmove","touchend"]:["mousedown","mousemove","mouseup"],this.addEvent()},d.prototype.addEvent=function(){this.startEventHandler=h.bind(this),this.cover.addEventListener(this.events[0],this.startEventHandler,!1)},d.prototype.clearCover=function(){this.ctx.clearRect(0,0,this.cover.width,this.cover.height)},d.prototype.init=function(a,c){if(!g())return void alert("对不起，当前浏览器不支持Canvas，无法使用本控件！");var d=this;f(arguments,function(a){if("object"==typeof a)for(var b in a)"callback"===b&&"function"==typeof a[b]?d.opt.callback=a[b].bind(d):b in d.opt&&(d.opt[b]=a[b]);else"function"==typeof a&&(d.opt.callback=a.bind(d))}),this.scratchDiv=b.getElementById("scratch"),this.cardDiv=b.getElementById("card"),this.scratchDiv&&this.cardDiv&&(this.cHeight=this.cardDiv.clientHeight,this.cWidth=this.cardDiv.clientWidth,this.cardDiv.style.opacity=0,this.createCanvas(),this.eventDetect())},d.case=function(a,b){return new d(a,b)},"function"==typeof define&&"object"==typeof define.amd&&define.amd?define(function(){return d}):"undefined"!=typeof module&&module.exports?(module.exports=d.case,module.exports.LuckyCard=d):a.LuckyCard=d}(window,document); \ No newline at end of file +/*! lucky-card 1.0.0 https://github.com/Franslee/lucky-card 2017-08-17 */ +!function(a,b,c){"use strict";function d(a,b){this.cover=null,this.ctx=null,this.scratchDiv=null,this.cardDiv=null,this.cHeight=0,this.cWidth=0,this.supportTouch=!1,this.events=[],this.startEventHandler=null,this.moveEventHandler=null,this.endEventHandler=null,this.opt={coverColor:"#C5C5C5",coverImg:"",ratio:.8,callback:null},this.init(a,b)}function e(a,b,c){var d=a.getImageData(0,0,this.cWidth,this.cHeight),e=[];f(d.data,function(a,b){var c=d.data[b+3];0===c&&e.push(c)}),e.length/d.data.length>c&&b&&"function"==typeof b&&b()}function f(a,b){return Array.prototype.forEach.call(a,function(a,c){b(a,c)})}function g(){var a=b.createElement("canvas");return!(!a.getContext||!a.getContext("2d"))}function h(a){a.preventDefault(),this.moveEventHandler=i.bind(this),this.cover.addEventListener(this.events[1],this.moveEventHandler,!1),this.endEventHandler=j.bind(this),b.addEventListener(this.events[2],this.endEventHandler,!1)}function i(a){a.preventDefault();var c=this.supportTouch?a.touches[0]:a,d=this.cover.getBoundingClientRect(),e=b.documentElement.scrollTop||b.body.scrollTop,f=b.documentElement.scrollLeft||b.body.scrollLeft,g=c.pageX-d.left-f,h=c.pageY-d.top-e;this.ctx.beginPath(),this.ctx.fillStyle="#FFFFFF",this.ctx.globalCompositeOperation="destination-out",this.ctx.arc(g,h,10,0,2*Math.PI),this.ctx.fill()}function j(a){a.preventDefault(),this.opt.callback&&"function"==typeof this.opt.callback&&e.call(this,this.ctx,this.opt.callback,this.opt.ratio),this.cover.removeEventListener(this.events[1],this.moveEventHandler,!1),b.removeEventListener(this.events[2],this.endEventHandler,!1)}d.prototype.createCanvas=function(){if(this.cover=b.createElement("canvas"),this.cover.id="cover",this.cover.height=this.cHeight,this.cover.width=this.cWidth,this.ctx=this.cover.getContext("2d"),this.opt.coverImg){var a=this,c=new Image;c.src=this.opt.coverImg,c.onload=function(){a.ctx.drawImage(c,0,0,a.cover.width,a.cover.height)}}else this.ctx.fillStyle=this.opt.coverColor,this.ctx.fillRect(0,0,this.cover.width,this.cover.height);this.scratchDiv.appendChild(this.cover),this.cardDiv.style.opacity=1},d.prototype.eventDetect=function(){"ontouchstart"in a&&(this.supportTouch=!0),this.events=this.supportTouch?["touchstart","touchmove","touchend"]:["mousedown","mousemove","mouseup"],this.addEvent()},d.prototype.addEvent=function(){this.startEventHandler=h.bind(this),this.cover.addEventListener(this.events[0],this.startEventHandler,!1)},d.prototype.clearCover=function(){this.ctx.clearRect(0,0,this.cover.width,this.cover.height),this.cover.removeEventListener(this.events[0],this.startEventHandler),this.cover.removeEventListener(this.events[1],this.moveEventHandler),this.cover.removeEventListener(this.events[2],this.endEventHandler)},d.prototype.init=function(a,c){if(!g())return void alert("对不起，当前浏览器不支持Canvas，无法使用本控件！");var d=this;f(arguments,function(a){if("object"==typeof a)for(var b in a)"callback"===b&&"function"==typeof a[b]?d.opt.callback=a[b].bind(d):b in d.opt&&(d.opt[b]=a[b]);else"function"==typeof a&&(d.opt.callback=a.bind(d))}),this.scratchDiv=b.getElementById("scratch"),this.cardDiv=b.getElementById("card"),this.scratchDiv&&this.cardDiv&&(this.cHeight=this.cardDiv.clientHeight,this.cWidth=this.cardDiv.clientWidth,this.cardDiv.style.opacity=0,this.createCanvas(),this.eventDetect())},d.case=function(a,b){return new d(a,b)},"function"==typeof define&&"object"==typeof define.amd&&define.amd?define(function(){return d}):"undefined"!=typeof module&&module.exports?(module.exports=d.case,module.exports.LuckyCard=d):a.LuckyCard=d}(window,document); \ No newline at end of file diff --git a/package.json b/package.json index e6d68e6..36ae6bd 100644 --- a/package.json +++ b/package.json @@ -1,28 +1,29 @@ { - "name": "lucky-card", - "version": "1.0.0", - "description": "Scratch card based on canvas", - "main": "luckycard.js", - "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" - }, - "keywords": [ - "scratch", - "card" - ], - "author": "Frans.Lee", - "license": "MIT", - "repository": { - "type": "git", - "url": "https://github.com/Franslee/lucky-card.git" - }, - "devDependencies": { - "grunt": "^0.4.5", - "grunt-autoprefixer": "^2.2.0", - "grunt-contrib-clean": "^0.6.0", - "grunt-contrib-copy": "^0.8.0", - "grunt-contrib-jshint": "^0.11.3", - "grunt-contrib-uglify": "^0.7.0", - "grunt-contrib-watch": "^0.6.1" - } + "name": "lucky-card", + "version": "1.0.0", + "description": "Scratch card based on canvas", + "main": "luckycard.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "keywords": [ + "scratch", + "card" + ], + "author": "Frans.Lee", + "license": "MIT", + "repository": { + "type": "git", + "url": "https://github.com/Franslee/lucky-card.git" + }, + "devDependencies": { + "grunt": "^0.4.5", + "grunt-autoprefixer": "^2.2.0", + "grunt-cli": "^1.2.0", + "grunt-contrib-clean": "^0.6.0", + "grunt-contrib-copy": "^0.8.0", + "grunt-contrib-jshint": "^0.11.3", + "grunt-contrib-uglify": "^0.7.0", + "grunt-contrib-watch": "^0.6.1" + } } diff --git a/src/lucky-card.js b/src/lucky-card.js index 58b265c..be3bb1f 100644 --- a/src/lucky-card.js +++ b/src/lucky-card.js @@ -8,11 +8,12 @@ * Licensed under the MIT license: * http://www.opensource.org/licenses/mit-license.php * - * Version: 1.0.1 + * Version: 1.0.3 * * Update: * 1.0.1 Fixed a bug with "coverImg".(Thanks to dongnanyanhai reported the problem) 2015-11-10 * 1.0.2 Fixed a bug when page can be scrolling.(Thanks to agileago's report & Tomatoo's pull) 2016-03-17 + * 1.0.3 Fixed some bugs. 2017-08-17 * */ ; @@ -48,7 +49,7 @@ }; function _calcArea(ctx, callback, ratio) { - var pixels = ctx.getImageData(0, 0, 300, 100); + var pixels = ctx.getImageData(0, 0, this.cWidth, this.cHeight); var transPixels = []; _forEach(pixels.data, function(item, i) { var pixel = pixels.data[i + 3]; @@ -77,18 +78,18 @@ * touchstart/mousedown event handler */ function _startEventHandler(event) { - this.cardDiv.style.opacity = 1; + event.preventDefault(); this.moveEventHandler = _moveEventHandler.bind(this); this.cover.addEventListener(this.events[1],this.moveEventHandler,false); this.endEventHandler = _endEventHandler.bind(this); document.addEventListener(this.events[2],this.endEventHandler,false); - event.preventDefault(); }; /** * touchmove/mousemove event handler */ function _moveEventHandler(event) { + event.preventDefault(); var evt = this.supportTouch?event.touches[0]:event; var coverPos = this.cover.getBoundingClientRect(); var pageScrollTop = document.documentElement.scrollTop || document.body.scrollTop; @@ -101,18 +102,16 @@ this.ctx.globalCompositeOperation = "destination-out"; this.ctx.arc(mouseX, mouseY, 10, 0, 2 * Math.PI); this.ctx.fill(); - - event.preventDefault(); }; /** * touchend/mouseup event handler */ function _endEventHandler(event) { - if (this.opt.callback && typeof this.opt.callback === 'function') _calcArea(this.ctx, this.opt.callback, this.opt.ratio); + event.preventDefault(); + if (this.opt.callback && typeof this.opt.callback === 'function') _calcArea.call(this,this.ctx, this.opt.callback, this.opt.ratio); this.cover.removeEventListener(this.events[1],this.moveEventHandler,false); document.removeEventListener(this.events[2],this.endEventHandler,false); - event.preventDefault(); }; /** @@ -136,6 +135,7 @@ this.ctx.fillRect(0, 0, this.cover.width, this.cover.height); } this.scratchDiv.appendChild(this.cover); + this.cardDiv.style.opacity = 1; } /** @@ -160,6 +160,9 @@ */ LuckyCard.prototype.clearCover = function() { this.ctx.clearRect(0, 0, this.cover.width, this.cover.height); + this.cover.removeEventListener(this.events[0],this.startEventHandler); + this.cover.removeEventListener(this.events[1],this.moveEventHandler); + this.cover.removeEventListener(this.events[2],this.endEventHandler); };