Skip to content

Commit

Permalink
Merge pull request #10 from BPing/dev
Browse files Browse the repository at this point in the history 
eraser
  • Loading branch information
@BPing
BPing authored Mar 10, 2017
2 parents cecddf1 + 044f1af commit 8d5c7e3
Show file tree
Hide file tree
Showing 5 changed files with 102 additions and 47 deletions.
20 changes: 16 additions & 4 deletions gulpfile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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/";
Expand Down Expand Up @@ -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));
});
Expand Down Expand Up @@ -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'));

Expand Down
20 changes: 13 additions & 7 deletions js/canvas.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -460,7 +465,8 @@
// id of canvas element
canvasId: "crysyan-canvas",
// length of history 'revokeImgDatas' list
historyListLen: 50
historyListLen: 50,
bgColor:"#ffffff",
};


Expand Down
3 changes: 2 additions & 1 deletion js/config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
43 changes: 28 additions & 15 deletions js/crysyan-designer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
* @author cbping
* @module CrysyanDesigner
*/
!(function() {
!(function () {
// jquery
if (!window.$) {
var jQuery = window.parent.$ || window.jQuery;
Expand All @@ -28,6 +28,7 @@
return (Math.random() * new Date().getTime()).toString(36).replace(/\./g, '');
}
}

/**
* CrysyanDesigner
*
Expand All @@ -38,33 +39,45 @@
*/
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;
designer.iframe.src = (config.projectPath || "") + "html/crysyan.html?config=" + JSON.stringify(config);
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
*
Expand All @@ -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);
});
};
Expand Down
63 changes: 43 additions & 20 deletions js/widget/eraser.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -42,7 +42,7 @@
case "2":
ctx.save();
ctx.beginPath();
ctx.moveTo(loc.x,loc.y);
ctx.moveTo(loc.x, loc.y);
break;
}
};
Expand Down Expand Up @@ -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;
Expand All @@ -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();
};
//
Expand Down Expand Up @@ -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();
})
},
Expand Down

0 comments on commit 8d5c7e3

Please sign in to comment.