diff --git a/js/canvas.js b/js/canvas.js index 237aeb5..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,11 @@ 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.clearCanvasWithOnlyBackGroupImage(); + this.clearCanvasWithOnlyBackGroundImage(); this.playContext.restore(); }, // - clearCanvasWithOnlyBackGroupImage: function () { + 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); @@ -464,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 38dcf33..1e4c560 100644 --- a/js/widget/eraser.js +++ b/js/widget/eraser.js @@ -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_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.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(); }; //