Skip to content

Commit 8d5c7e3

Browse files
BPingBPing
authored
Merge pull request #10 from BPing/dev
eraser
2 parents cecddf1 + 044f1af commit 8d5c7e3

File tree

5 files changed

+102
-47
lines changed

5 files changed

+102
-47
lines changed

‎gulpfile.js

+16-4
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,23 @@ var tar = require('gulp-tar');
1111
var gzip = require('gulp-gzip');
1212
var less = require('gulp-less');
1313
var cleanCSS = require('gulp-clean-css');
14-
// var debug = require('gulp-debug');
14+
var header = require('gulp-header');
1515
var runSequence = require('gulp-sequence');
1616
var replace = require('gulp-replace');
1717
var distPath = "dist/crysyan/";
18-
var version = "0.1.3.beta";
18+
// using data from package.json
19+
var pkg = require('./package.json');
1920
var widgetsLoad = [];
2021

22+
var headTitle = ['/**',
23+
' * <%= pkg.name %> - <%= pkg.description %>',
24+
' * @version v<%= pkg.version %>',
25+
' * @link <%= pkg.homepage %>',
26+
' * @author <%= pkg.author %>',
27+
' * @license <%= pkg.license %>',
28+
' */',
29+
''].join('\n');
30+
2131
(function () {
2232
// var widgetConfig= require('js/config.js');
2333
// var widgetBasePath = "js/widget/";
@@ -52,6 +62,8 @@ gulp.task('designer-minify', function () {
5262
.pipe(plumber())
5363
.pipe(uglify())
5464
.pipe(plumber())
65+
.pipe(header(headTitle,{pkg:pkg}))
66+
.pipe(plumber())
5567
.pipe(rename({suffix: '-min'}))
5668
.pipe(gulp.dest(distPath));
5769
});
@@ -165,14 +177,14 @@ gulp.task('build', ['building','after-building-clean']);
165177
gulp.task('zip', function () {
166178
return gulp.src([distPath+'*', distPath+'**/*', "!"+distPath+'js'])
167179
.pipe(plumber())
168-
.pipe(zip('crysyan-' + version + '.zip'))
180+
.pipe(zip('crysyan-' + pkg.version + '.zip'))
169181
.pipe(gulp.dest('release'));
170182
});
171183

172184
gulp.task('tar.gz', function () {
173185
return gulp.src([distPath+'*', distPath+'**/*', "!"+distPath+'js'])
174186
.pipe(plumber())
175-
.pipe(tar('crysyan-' + version +'.tar'))
187+
.pipe(tar('crysyan-' + pkg.version +'.tar'))
176188
.pipe(gzip())
177189
.pipe(gulp.dest('release'));
178190

‎js/canvas.js

+13-7
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@
3838
height: 0
3939
};
4040

41+
// can be export
4142
this.backgroudColor = ops.bgColor || "#ffffff";
4243
// An array that store the history imgdata which capture from canvas
4344
// for revoking and forward revoking.
@@ -111,11 +112,15 @@
111112
this.playContext.fillStyle = this.backgroudColor;
112113
this.playContext.fillRect(0, 0, this.playCanvas.width, this.playCanvas.height);
113114
// this.playContext.clearRect(0, 0, this.playCanvas.width, this.playCanvas.height);
115+
this.clearCanvasWithOnlyBackGroundImage();
116+
this.playContext.restore();
117+
},
118+
//
119+
clearCanvasWithOnlyBackGroundImage: function () {
114120
if (this.backgroudImage.image !== null) {
115121
var image = this.backgroudImage.image;
116122
this.drawImage(image, (this.playCanvas.width - image.width) / 2, (this.playCanvas.height - image.height) / 2, image.width, image.height);
117123
}
118-
this.playContext.restore();
119124
},
120125
/**
121126
* The event coordinate point is transformed
@@ -186,15 +191,15 @@
186191
if (image.width >= canvas.playCanvas.width && ivwr > ivhr) {
187192
// Beyond the canvas's width
188193
// zoom ratio
189-
canvas.backgroudImage.height = canvas.playCanvas.height * (1 / ivwr).toFixed(2);
194+
image.width = canvas.backgroudImage.width;
195+
image.height = canvas.backgroudImage.height = canvas.playCanvas.height * (1 / ivwr).toFixed(2);
190196
} else if (image.height >= canvas.playCanvas.height && (ivhr > ivwr)) {
191197
// Beyond the canvas's height
192198
// zoom ratio
193-
canvas.backgroudImage.width = canvas.playCanvas.width * (1 / ivhr).toFixed(2);
199+
image.width = canvas.backgroudImage.width = canvas.playCanvas.width * (1 / ivhr).toFixed(2);
200+
image.height = canvas.backgroudImage.height;
194201
}
195-
image.width = canvas.backgroudImage.width;
196-
image.height = canvas.backgroudImage.height;
197-
}else{
202+
} else {
198203
// if the width of image bigger than canvas's,will set to canvas's width
199204
if (image.width >= canvas.backgroudImage.width) {
200205
image.width = canvas.backgroudImage.width;
@@ -460,7 +465,8 @@
460465
// id of canvas element
461466
canvasId: "crysyan-canvas",
462467
// length of history 'revokeImgDatas' list
463-
historyListLen: 50
468+
historyListLen: 50,
469+
bgColor:"#ffffff",
464470
};
465471

466472

‎js/config.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,8 @@
9191
width: 900,
9292
height: 400,
9393
// the most length of history 'revoke' list
94-
historyListLen:50
94+
historyListLen:50,
95+
bgColor:"#ffffff",
9596
},
9697
toolbar: {
9798
Id: "crysyan-toolbar",

‎js/crysyan-designer.js

+28-15
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
* @author cbping
66
* @module CrysyanDesigner
77
*/
8-
!(function() {
8+
!(function () {
99
// jquery
1010
if (!window.$) {
1111
var jQuery = window.parent.$ || window.jQuery;
@@ -28,6 +28,7 @@
2828
return (Math.random() * new Date().getTime()).toString(36).replace(/\./g, '');
2929
}
3030
}
31+
3132
/**
3233
* CrysyanDesigner
3334
*
@@ -38,33 +39,45 @@
3839
*/
3940
function CrysyanDesigner(config, callback) {
4041
var designer = this;
41-
designer.appendTo = function(parentNode) {
42+
designer.appendTo = function (parentNode) {
4243
designer.iframe = document.createElement('iframe');
4344
designer.iframe.name = config.ifrName ? config.ifrName : "default-iframe" + getRandomString();
4445
designer.iframe.uid = designer.iframe.name;
4546
designer.iframe.src = (config.projectPath || "") + "html/crysyan.html?config=" + JSON.stringify(config);
4647
designer.iframe.style.width = '100%';
4748
designer.iframe.style.height = '100%';
4849
designer.iframe.style.border = 0;
49-
designer.iframe.onload = function() {
50+
designer.iframe.onload = function () {
5051
callback(designer);
5152
};
5253
parentNode.appendChild(designer.iframe);
5354
};
54-
designer.destroy = function() {
55+
designer.destroy = function () {
5556
if (designer.iframe) {
5657
designer.iframe.parentNode.removeChild(designer.iframe);
5758
designer.iframe = null;
5859
}
5960
};
6061
/**
61-
* get view
62-
*
62+
* get view
63+
*
6364
* @returns {*}
6465
*/
65-
designer.getView = function() {
66+
designer.getView = function () {
6667
return window[designer.iframe.uid].Crysyan.getView();
6768
};
69+
70+
/**
71+
* drawBackgroupWithImage
72+
* compatible
73+
* @see drawBackgroundWithImage
74+
* @param image
75+
* @param mode
76+
*/
77+
designer.drawBackgroupWithImage = function (image, mode) {
78+
designer.drawBackgroundWithImage(image, mode);
79+
};
80+
6881
/**
6982
* drawBackgroundWithImage
7083
*
@@ -74,38 +87,38 @@
7487
* @param {[File|Image|String} image the image you want to draw as background
7588
* @param mode Scale by scale,if mode=1.default 1.
7689
*/
77-
designer.drawBackgroupWithImage = function(image,mode) {
90+
designer.drawBackgroundWithImage = function (image, mode) {
7891
var view = window[designer.iframe.uid].Crysyan.getView();
7992
view.crysyanCanvas.drawBackgroundWithImage(image, mode);
8093
};
8194
/**
82-
* get Date-Url
95+
* get Date-Url
8396
* @param type
8497
* @returns {*|string}
8598
*/
86-
designer.toDataUrl = function(type) {
87-
if (typeof type==="undefined") type="image/png";
99+
designer.toDataUrl = function (type) {
100+
if (typeof type === "undefined") type = "image/png";
88101
var view = window[designer.iframe.uid].Crysyan.getView();
89102
return view.crysyanCanvas.toDataURL(type);
90103
};
91104

92105
/**
93106
* get Recorder
94-
*
107+
*
95108
* @param config
96109
* @returns {null|RecordRTC} if record not supported,return null.
97110
* @see {@link https://github.com/muaz-khan/RecordRTC}
98111
*/
99-
designer.getCanvasRecorder = function(config) {
112+
designer.getCanvasRecorder = function (config) {
100113
var view = window[designer.iframe.uid].Crysyan.getView();
101114
return view.crysyanCanvas.getCanvasRecorder(config);
102115
};
103116
}
104117

105118
// jquery Plug-in
106-
$.fn.CrysyanDesigner = function(config, callback) {
119+
$.fn.CrysyanDesigner = function (config, callback) {
107120
var designer = this;
108-
designer.each(function() {
121+
designer.each(function () {
109122
new CrysyanDesigner(config, callback).appendTo(this);
110123
});
111124
};

‎js/widget/eraser.js

+43-20
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
var CrysyanEraserWidget = $widget.clone();
1212
var eraser = CrysyanEraserWidget;
1313
// when shapeType is 'path',it doesn't work.
14-
eraser.eraserWidth = 25;
14+
eraser.eraserWidth = 15;
1515
// 0:square ,1:circular, 2:path
1616
eraser.shapeType = 0;
1717
eraser.menu = null;
@@ -42,7 +42,7 @@
4242
case "2":
4343
ctx.save();
4444
ctx.beginPath();
45-
ctx.moveTo(loc.x,loc.y);
45+
ctx.moveTo(loc.x, loc.y);
4646
break;
4747
}
4848
};
@@ -99,20 +99,6 @@
9999
context.clip();
100100
};
101101
//
102-
eraser.setErasePathForEraser = function (context, shape) {
103-
context.beginPath();
104-
if (shape === "0" || shape === 0) {
105-
context.arc(eraser.prePoint.loc.x, eraser.prePoint.loc.y,
106-
eraser.eraserWidth / 2 + ERASER_LINE_WIDTH,
107-
0, Math.PI * 2, false);
108-
} else if (shape === "1" || shape === 1) {
109-
context.rect(eraser.prePoint.loc.x - eraser.eraserWidth / 2,
110-
eraser.prePoint.loc.y - eraser.eraserWidth / 2,
111-
eraser.eraserWidth, eraser.eraserWidth)
112-
}
113-
context.clip();
114-
};
115-
//
116102
eraser.setEraserAttributes = function (context) {
117103
context.lineWidth = ERASER_LINE_WIDTH;
118104
context.shadowColor = ERASER_SHADOW_STYLE;
@@ -123,9 +109,46 @@
123109
};
124110
//
125111
eraser.eraseLast = function (context, shape) {
126-
context.save();
127-
eraser.setErasePathForEraser(context, shape);
128-
eraser.crysyanCanvas.clearCanvas();
112+
if (shape === "0" || shape === 0) {//circle
113+
// draw background color
114+
context.save();
115+
context.beginPath();
116+
context.arc(eraser.prePoint.loc.x, eraser.prePoint.loc.y,
117+
eraser.eraserWidth / 2 + ERASER_LINE_WIDTH,
118+
0, Math.PI * 2, false);
119+
context.fillStyle = eraser.crysyanCanvas.backgroudColor;
120+
context.fill();
121+
context.restore();
122+
123+
// draw background Image
124+
context.save();
125+
context.beginPath();
126+
// Clear edge background color, so the radius of the circle 1 units bigger than the previous
127+
context.arc(eraser.prePoint.loc.x, eraser.prePoint.loc.y,
128+
eraser.eraserWidth / 2 + ERASER_LINE_WIDTH + 1,
129+
0, Math.PI * 2, false);
130+
131+
} else if (shape === "1" || shape === 1) {//square
132+
// draw background color
133+
context.save();
134+
context.beginPath();
135+
context.rect(eraser.prePoint.loc.x - (eraser.eraserWidth / 2) - ERASER_LINE_WIDTH,
136+
eraser.prePoint.loc.y - (eraser.eraserWidth / 2) - ERASER_LINE_WIDTH,
137+
(eraser.eraserWidth / 1) + ERASER_LINE_WIDTH, (eraser.eraserWidth / 1) + ERASER_LINE_WIDTH + 1);
138+
context.fillStyle = eraser.crysyanCanvas.backgroudColor;
139+
context.fill();
140+
context.restore();
141+
142+
// draw background Image
143+
context.save();
144+
context.beginPath();
145+
// Clear edge background color, so the width of the square 2 units bigger than the previous
146+
context.rect(eraser.prePoint.loc.x - (eraser.eraserWidth / 2) - ERASER_LINE_WIDTH - 1,
147+
eraser.prePoint.loc.y - (eraser.eraserWidth / 2) - ERASER_LINE_WIDTH - 1,
148+
(eraser.eraserWidth / 1) + ERASER_LINE_WIDTH + 1, (eraser.eraserWidth / 1) + ERASER_LINE_WIDTH + 3);
149+
}
150+
context.clip();
151+
eraser.crysyanCanvas.clearCanvasWithOnlyBackGroundImage();
129152
context.restore();
130153
};
131154
//
@@ -181,7 +204,7 @@
181204
var eraserWithEle = findElement("crysyan-eraser-diameter");
182205
$util.addEvent(findElement("crysan-eraser-done"), "click", function () {
183206
eraser.eraserWidth = eraserWithEle.value;
184-
eraser.shapeType=eraserShapeEle.value;
207+
eraser.shapeType = eraserShapeEle.value;
185208
menu.hide();
186209
})
187210
},

0 commit comments

Comments
 (0)