lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-04-05 20:48:28 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge branch 'master' of https://github.com/Ziriax/KineticJS

Browse Source 
Fixed bug #527 - filters and cropping are now friends.
This commit is contained in:
ippo615 2013-09-29 14:00:51 -04:00
commit 8b7b3db9ef
2 changed files with 97 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
src/shapes/Image.js
View File

@ -40,15 +40,13 @@
Kinetic.Shape.call(this, config);
this.className = IMAGE;
},
drawFunc: function(context) {
var width = this.getWidth(),
height = this.getHeight(),
params,
that = this,
cropX = this.getCropX() || 0,
cropY = this.getCropY() || 0,
cropWidth = this.getCropWidth(),
cropHeight = this.getCropHeight(),
var width = this.getWidth(),
height = this.getHeight(),
that = this,
crop,
params,
image;
//TODO: this logic needs to hook int othe new caching system
@ -60,11 +58,26 @@
}
// NOTE: this.filterCanvas may be set by the above code block
// In that case, cropping is already applied.
if (this.filterCanvas) {
image = this.filterCanvas._canvas;
params = [image, 0, 0, width, height];
}
else {
image = this.getImage();
if (image) {
crop = this.getCrop();
if (crop) {
crop.x = crop.x || 0;
crop.y = crop.y || 0;
crop.width = crop.width || image.width - crop.x;
crop.height = crop.height || image.height - crop.y;
params = [image, crop.x, crop.y, crop.width, crop.height, 0, 0, width, height];
} else {
params = [image, 0, 0, width, height];
}
}
}
context.beginPath();
@ -72,22 +85,13 @@
context.closePath();
context.fillStrokeShape(this);
if(image) {
// if cropping
if(cropWidth && cropHeight) {
params = [image, cropX, cropY, cropWidth, cropHeight, 0, 0, width, height];
}
// no cropping
else {
params = [image, 0, 0, width, height];
}
if (image) {
context.drawImage.apply(context, params);
}
},
drawHitFunc: function(context) {
var width = this.getWidth(),
height = this.getHeight(),
var width = this.getWidth(),
height = this.getHeight(),
imageHitRegion = this.imageHitRegion;
if(imageHitRegion) {
@ -110,25 +114,37 @@
width = this.getWidth(),
height = this.getHeight(),
filter = this.getFilter(),
crop = this.getCrop() || {},
filterCanvas, context, imageData;
if (this.filterCanvas){
// Determine the region we are cropping
crop.x = crop.x || 0;
crop.y = crop.y || 0;
crop.width = crop.width || image.width - crop.x;
crop.height = crop.height || image.height - crop.y;
// Make a filterCanvas the same size as the cropped image
if (this.filterCanvas &&
this.filterCanvas.getWidth() === crop.width &&
this.filterCanvas.getHeight() === crop.height) {
filterCanvas = this.filterCanvas;
filterCanvas.getContext().clear();
}
else {
filterCanvas = this.filterCanvas = new Kinetic.SceneCanvas({
width: width,
height: height,
pixelRatio: 1
width: crop.width,
height: crop.height,
pixelRatio: 1,
});
}
context = filterCanvas.getContext();
try {
context.drawImage(image, 0, 0, filterCanvas.getWidth(), filterCanvas.getHeight());
imageData = context.getImageData(0, 0, filterCanvas.getWidth(), filterCanvas.getHeight());
// Crop the image onto the filterCanvas then apply
// the filter to the filterCanvas
context.drawImage(image, crop.x, crop.y, crop.width, crop.height, 0,0,crop.width, crop.height);
imageData = context.getImageData(0, 0, crop.width, crop.height);
filter.call(this, imageData);
context.putImageData(imageData, 0, 0);
}

60
test/unit/filters/Blur-test.js
View File

@ -1,6 +1,6 @@
suite('Blur', function() {
// ======================================================
test('basic blur', function() {
test('basic blur', function(done) {
var stage = addStage();
var imageObj = new Image();
@ -21,12 +21,14 @@ suite('Blur', function() {
darth.setFilterRadius(10);
layer.draw();
done();
};
imageObj.src = 'assets/darth-vader.jpg';
});
// ======================================================
test('tween blur', function() {
test('tween blur', function(done) {
var stage = addStage();
var imageObj = new Image();
@ -49,7 +51,7 @@ suite('Blur', function() {
var tween = new Kinetic.Tween({
node: darth,
duration: 5.0,
duration: 2.0,
filterRadius: 0,
easing: Kinetic.Easings.EaseInOut
});
@ -62,12 +64,14 @@ suite('Blur', function() {
tween.reverse();
});
done();
};
imageObj.src = 'assets/darth-vader.jpg';
});
// ======================================================
test('crop blur', function() {
test('crop blur', function(done) {
var stage = addStage();
var imageObj = new Image();
@ -78,7 +82,7 @@ suite('Blur', function() {
x: 10,
y: 10,
image: imageObj,
crop: {x:48, y:48, width:256, height:256},
crop: {x:128, y:48, width:256, height:128},
draggable: true
});
@ -89,6 +93,52 @@ suite('Blur', function() {
darth.setFilterRadius(10);
layer.draw();
done();
};
imageObj.src = 'assets/darth-vader.jpg';
});
// ======================================================
test('crop tween blur', function(done) {
var stage = addStage();
var imageObj = new Image();
imageObj.onload = function() {
var layer = new Kinetic.Layer();
darth = new Kinetic.Image({
x: 10,
y: 10,
image: imageObj,
crop: {x:128, y:48, width:256, height:128},
draggable: true
});
layer.add(darth);
stage.add(layer);
darth.setFilter(Kinetic.Filters.Blur);
darth.setFilterRadius(100);
layer.draw();
var tween = new Kinetic.Tween({
node: darth,
duration: 2.0,
filterRadius: 0,
easing: Kinetic.Easings.EaseInOut
});
darth.on('mouseover', function() {
tween.play();
});
darth.on('mouseout', function() {
tween.reverse();
});
done();
};
imageObj.src = 'assets/darth-vader.jpg';
});