lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2026-03-03 16:58:33 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

FIX: A Kinetic.Image that has both a crop and filter now draws correctly

Browse Source
This commit is contained in:
StronglyTypedSolutions@gmail.com
2013-07-15 17:45:04 +02:00
parent 1cbc3dd31c
commit 6e68a200e2
1 changed files with 40 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
src/shapes/Image.js
View File

@@ -40,14 +40,15 @@
this.className = IMAGE; this.className = IMAGE;
this._setDrawFuncs(); this._setDrawFuncs();
}, },
drawFunc: function(canvas) { drawFunc: function(canvas) {
var width = this.getWidth(), var width = this.getWidth(),
height = this.getHeight(), height = this.getHeight(),
params,
that = this, that = this,
context = canvas.getContext(), context = canvas.getContext(),
crop = this.getCrop(), crop,
cropX, cropY, cropWidth, cropHeight, image; params,
image;
// if a filter is set, and the filter needs to be updated, reapply // if a filter is set, and the filter needs to be updated, reapply
if (this.getFilter() && this._applyFilter) { if (this.getFilter() && this._applyFilter) {
@@ -55,32 +56,36 @@
this._applyFilter = false; this._applyFilter = false;
} }
// NOTE: this.filterCanvas may be set by the above code block // NOTE: this.filterCanvas may be set by the above code block
// In that case, cropping is already applied.
if (this.filterCanvas) { if (this.filterCanvas) {
image = this.filterCanvas.getElement(); image = this.filterCanvas.getElement();
} params = [image, 0, 0, width, height];
}
else { else {
image = this.getImage(); 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(); context.beginPath();
context.rect(0, 0, width, height); context.rect(0, 0, width, height);
context.closePath(); context.closePath();
canvas.fillStroke(this); canvas.fillStroke(this);
if(image) { if (image) {
// if cropping
if(crop) {
cropX = crop.x || 0;
cropY = crop.y || 0;
cropWidth = crop.width || 0;
cropHeight = crop.height || 0;
params = [image, cropX, cropY, cropWidth, cropHeight, 0, 0, width, height];
}
// no cropping
else {
params = [image, 0, 0, width, height];
}
if(this.hasShadow()) { if(this.hasShadow()) {
canvas.applyShadow(this, function() { canvas.applyShadow(this, function() {
@@ -92,6 +97,7 @@
} }
} }
}, },
drawHitFunc: function(canvas) { drawHitFunc: function(canvas) {
var width = this.getWidth(), var width = this.getWidth(),
height = this.getHeight(), height = this.getHeight(),
@@ -118,22 +124,31 @@
width = this.getWidth(), width = this.getWidth(),
height = this.getHeight(), height = this.getHeight(),
filter = this.getFilter(), filter = this.getFilter(),
crop = this.getCrop() || {},
filterCanvas, context, imageData; filterCanvas, context, imageData;
if (this.filterCanvas){ 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;
if (this.filterCanvas &&
this.filterCanvas.getWidth() == crop.width &&
this.filterCanvas.getHeight() == crop.height) {
filterCanvas = this.filterCanvas; filterCanvas = this.filterCanvas;
} }
else { else {
filterCanvas = this.filterCanvas = new Kinetic.SceneCanvas({ filterCanvas = this.filterCanvas = new Kinetic.SceneCanvas({
width: width, width: crop.width,
height: height height: crop.height,
pixelRatio: 1,
}); });
} }
context = filterCanvas.getContext(); context = filterCanvas.getContext();
try { try {
this._drawImage(context, [image, 0, 0, width, height]); this._drawImage(context, [image, crop.x, crop.y, crop.width, crop.height, 0, 0, crop.width, crop.height]);
imageData = context.getImageData(0, 0, filterCanvas.getWidth(), filterCanvas.getHeight()); imageData = context.getImageData(0, 0, filterCanvas.getWidth(), filterCanvas.getHeight());
filter.call(this, imageData); filter.call(this, imageData);
context.putImageData(imageData, 0, 0); context.putImageData(imageData, 0, 0);