diff --git a/gulpfile.js b/gulpfile.js index 1460b63..d713ddd 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -11,13 +11,23 @@ var tar = require('gulp-tar'); var gzip = require('gulp-gzip'); var less = require('gulp-less'); var cleanCSS = require('gulp-clean-css'); -// var debug = require('gulp-debug'); +var header = require('gulp-header'); var runSequence = require('gulp-sequence'); var replace = require('gulp-replace'); var distPath = "dist/crysyan/"; -var version = "0.1.3.beta"; +// using data from package.json +var pkg = require('./package.json'); var widgetsLoad = []; +var headTitle = ['/**', + ' * <%= pkg.name %> - <%= pkg.description %>', + ' * @version v<%= pkg.version %>', + ' * @link <%= pkg.homepage %>', + ' * @author <%= pkg.author %>', + ' * @license <%= pkg.license %>', + ' */', + ''].join('\n'); + (function () { // var widgetConfig= require('js/config.js'); // var widgetBasePath = "js/widget/"; @@ -52,6 +62,8 @@ gulp.task('designer-minify', function () { .pipe(plumber()) .pipe(uglify()) .pipe(plumber()) + .pipe(header(headTitle,{pkg:pkg})) + .pipe(plumber()) .pipe(rename({suffix: '-min'})) .pipe(gulp.dest(distPath)); }); @@ -165,14 +177,14 @@ gulp.task('build', ['building','after-building-clean']); gulp.task('zip', function () { return gulp.src([distPath+'*', distPath+'**/*', "!"+distPath+'js']) .pipe(plumber()) - .pipe(zip('crysyan-' + version + '.zip')) + .pipe(zip('crysyan-' + pkg.version + '.zip')) .pipe(gulp.dest('release')); }); gulp.task('tar.gz', function () { return gulp.src([distPath+'*', distPath+'**/*', "!"+distPath+'js']) .pipe(plumber()) - .pipe(tar('crysyan-' + version +'.tar')) + .pipe(tar('crysyan-' + pkg.version +'.tar')) .pipe(gzip()) .pipe(gulp.dest('release')); diff --git a/js/canvas.js b/js/canvas.js index 6b108bb..b221aad 100644 --- a/js/canvas.js +++ b/js/canvas.js @@ -38,6 +38,7 @@ height: 0 }; + // can be export this.backgroudColor = ops.bgColor || "#ffffff"; // An array that store the history imgdata which capture from canvas // for revoking and forward revoking. @@ -111,11 +112,15 @@ this.playContext.fillStyle = this.backgroudColor; this.playContext.fillRect(0, 0, this.playCanvas.width, this.playCanvas.height); // this.playContext.clearRect(0, 0, this.playCanvas.width, this.playCanvas.height); + this.clearCanvasWithOnlyBackGroundImage(); + this.playContext.restore(); + }, + // + clearCanvasWithOnlyBackGroundImage: function () { if (this.backgroudImage.image !== null) { var image = this.backgroudImage.image; this.drawImage(image, (this.playCanvas.width - image.width) / 2, (this.playCanvas.height - image.height) / 2, image.width, image.height); } - this.playContext.restore(); }, /** * The event coordinate point is transformed @@ -186,15 +191,15 @@ if (image.width >= canvas.playCanvas.width && ivwr > ivhr) { // Beyond the canvas's width // zoom ratio - canvas.backgroudImage.height = canvas.playCanvas.height * (1 / ivwr).toFixed(2); + image.width = canvas.backgroudImage.width; + image.height = canvas.backgroudImage.height = canvas.playCanvas.height * (1 / ivwr).toFixed(2); } else if (image.height >= canvas.playCanvas.height && (ivhr > ivwr)) { // Beyond the canvas's height // zoom ratio - canvas.backgroudImage.width = canvas.playCanvas.width * (1 / ivhr).toFixed(2); + image.width = canvas.backgroudImage.width = canvas.playCanvas.width * (1 / ivhr).toFixed(2); + image.height = canvas.backgroudImage.height; } - image.width = canvas.backgroudImage.width; - image.height = canvas.backgroudImage.height; - }else{ + } else { // if the width of image bigger than canvas's,will set to canvas's width if (image.width >= canvas.backgroudImage.width) { image.width = canvas.backgroudImage.width; @@ -460,7 +465,8 @@ // id of canvas element canvasId: "crysyan-canvas", // length of history 'revokeImgDatas' list - historyListLen: 50 + historyListLen: 50, + bgColor:"#ffffff", }; diff --git a/js/config.js b/js/config.js index 0a2b2c0..1910f42 100644 --- a/js/config.js +++ b/js/config.js @@ -91,7 +91,8 @@ width: 900, height: 400, // the most length of history 'revoke' list - historyListLen:50 + historyListLen:50, + bgColor:"#ffffff", }, toolbar: { Id: "crysyan-toolbar", diff --git a/js/crysyan-designer.js b/js/crysyan-designer.js index ce7137c..fde30d4 100644 --- a/js/crysyan-designer.js +++ b/js/crysyan-designer.js @@ -5,7 +5,7 @@ * @author cbping * @module CrysyanDesigner */ -!(function() { +!(function () { // jquery if (!window.$) { var jQuery = window.parent.$ || window.jQuery; @@ -28,6 +28,7 @@ return (Math.random() * new Date().getTime()).toString(36).replace(/\./g, ''); } } + /** * CrysyanDesigner * @@ -38,7 +39,7 @@ */ function CrysyanDesigner(config, callback) { var designer = this; - designer.appendTo = function(parentNode) { + designer.appendTo = function (parentNode) { designer.iframe = document.createElement('iframe'); designer.iframe.name = config.ifrName ? config.ifrName : "default-iframe" + getRandomString(); designer.iframe.uid = designer.iframe.name; @@ -46,25 +47,37 @@ designer.iframe.style.width = '100%'; designer.iframe.style.height = '100%'; designer.iframe.style.border = 0; - designer.iframe.onload = function() { + designer.iframe.onload = function () { callback(designer); }; parentNode.appendChild(designer.iframe); }; - designer.destroy = function() { + designer.destroy = function () { if (designer.iframe) { designer.iframe.parentNode.removeChild(designer.iframe); designer.iframe = null; } }; /** - * get view - * + * get view + * * @returns {*} */ - designer.getView = function() { + designer.getView = function () { return window[designer.iframe.uid].Crysyan.getView(); }; + + /** + * drawBackgroupWithImage + * compatible + * @see drawBackgroundWithImage + * @param image + * @param mode + */ + designer.drawBackgroupWithImage = function (image, mode) { + designer.drawBackgroundWithImage(image, mode); + }; + /** * drawBackgroundWithImage * @@ -74,38 +87,38 @@ * @param {[File|Image|String} image the image you want to draw as background * @param mode Scale by scale,if mode=1.default 1. */ - designer.drawBackgroupWithImage = function(image,mode) { + designer.drawBackgroundWithImage = function (image, mode) { var view = window[designer.iframe.uid].Crysyan.getView(); view.crysyanCanvas.drawBackgroundWithImage(image, mode); }; /** - * get Date-Url + * get Date-Url * @param type * @returns {*|string} */ - designer.toDataUrl = function(type) { - if (typeof type==="undefined") type="image/png"; + designer.toDataUrl = function (type) { + if (typeof type === "undefined") type = "image/png"; var view = window[designer.iframe.uid].Crysyan.getView(); return view.crysyanCanvas.toDataURL(type); }; /** * get Recorder - * + * * @param config * @returns {null|RecordRTC} if record not supported,return null. * @see {@link https://github.com/muaz-khan/RecordRTC} */ - designer.getCanvasRecorder = function(config) { + designer.getCanvasRecorder = function (config) { var view = window[designer.iframe.uid].Crysyan.getView(); return view.crysyanCanvas.getCanvasRecorder(config); }; } // jquery Plug-in - $.fn.CrysyanDesigner = function(config, callback) { + $.fn.CrysyanDesigner = function (config, callback) { var designer = this; - designer.each(function() { + designer.each(function () { new CrysyanDesigner(config, callback).appendTo(this); }); }; diff --git a/js/widget/eraser.js b/js/widget/eraser.js index 68710af..1e4c560 100644 --- a/js/widget/eraser.js +++ b/js/widget/eraser.js @@ -11,7 +11,7 @@ var CrysyanEraserWidget = $widget.clone(); var eraser = CrysyanEraserWidget; // when shapeType is 'path',it doesn't work. - eraser.eraserWidth = 25; + eraser.eraserWidth = 15; // 0:square ,1:circular, 2:path eraser.shapeType = 0; eraser.menu = null; @@ -42,7 +42,7 @@ case "2": ctx.save(); ctx.beginPath(); - ctx.moveTo(loc.x,loc.y); + ctx.moveTo(loc.x, loc.y); break; } }; @@ -99,20 +99,6 @@ context.clip(); }; // - eraser.setErasePathForEraser = function (context, shape) { - context.beginPath(); - if (shape === "0" || shape === 0) { - context.arc(eraser.prePoint.loc.x, eraser.prePoint.loc.y, - eraser.eraserWidth / 2 + ERASER_LINE_WIDTH, - 0, Math.PI * 2, false); - } else if (shape === "1" || shape === 1) { - context.rect(eraser.prePoint.loc.x - eraser.eraserWidth / 2, - eraser.prePoint.loc.y - eraser.eraserWidth / 2, - eraser.eraserWidth, eraser.eraserWidth) - } - context.clip(); - }; - // eraser.setEraserAttributes = function (context) { context.lineWidth = ERASER_LINE_WIDTH; context.shadowColor = ERASER_SHADOW_STYLE; @@ -123,9 +109,46 @@ }; // eraser.eraseLast = function (context, shape) { - context.save(); - eraser.setErasePathForEraser(context, shape); - eraser.crysyanCanvas.clearCanvas(); + if (shape === "0" || shape === 0) {//circle + // draw background color + context.save(); + context.beginPath(); + context.arc(eraser.prePoint.loc.x, eraser.prePoint.loc.y, + eraser.eraserWidth / 2 + ERASER_LINE_WIDTH, + 0, Math.PI * 2, false); + context.fillStyle = eraser.crysyanCanvas.backgroudColor; + context.fill(); + context.restore(); + + // draw background Image + context.save(); + context.beginPath(); + // Clear edge background color, so the radius of the circle 1 units bigger than the previous + context.arc(eraser.prePoint.loc.x, eraser.prePoint.loc.y, + eraser.eraserWidth / 2 + ERASER_LINE_WIDTH + 1, + 0, Math.PI * 2, false); + + } else if (shape === "1" || shape === 1) {//square + // draw background color + context.save(); + context.beginPath(); + context.rect(eraser.prePoint.loc.x - (eraser.eraserWidth / 2) - ERASER_LINE_WIDTH, + eraser.prePoint.loc.y - (eraser.eraserWidth / 2) - ERASER_LINE_WIDTH, + (eraser.eraserWidth / 1) + ERASER_LINE_WIDTH, (eraser.eraserWidth / 1) + ERASER_LINE_WIDTH + 1); + context.fillStyle = eraser.crysyanCanvas.backgroudColor; + context.fill(); + context.restore(); + + // draw background Image + context.save(); + context.beginPath(); + // Clear edge background color, so the width of the square 2 units bigger than the previous + context.rect(eraser.prePoint.loc.x - (eraser.eraserWidth / 2) - ERASER_LINE_WIDTH - 1, + eraser.prePoint.loc.y - (eraser.eraserWidth / 2) - ERASER_LINE_WIDTH - 1, + (eraser.eraserWidth / 1) + ERASER_LINE_WIDTH + 1, (eraser.eraserWidth / 1) + ERASER_LINE_WIDTH + 3); + } + context.clip(); + eraser.crysyanCanvas.clearCanvasWithOnlyBackGroundImage(); context.restore(); }; // @@ -181,7 +204,7 @@ var eraserWithEle = findElement("crysyan-eraser-diameter"); $util.addEvent(findElement("crysan-eraser-done"), "click", function () { eraser.eraserWidth = eraserWithEle.value; - eraser.shapeType=eraserShapeEle.value; + eraser.shapeType = eraserShapeEle.value; menu.hide(); }) },