lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-10-15 12:34:52 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

rewrote cropping logic from last pull request, fixed serialization issue in unit test, added new unit tests, and added getX() and getY() methods

Browse Source
This commit is contained in:
Eric Rowell
2012-04-27 19:08:45 -07:00
parent f5735b3462
commit 508bfb7a9b
6 changed files with 190 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/Node.js
View File

@@ -158,6 +158,20 @@ Kinetic.Node.prototype = {
this.attrs[key].y = val.y;
}
break;
case 'crop':
if(val.x !== undefined) {
this.attrs[key].x = val.x;
}
if(val.y !== undefined) {
this.attrs[key].y = val.y;
}
if(val.width !== undefined) {
this.attrs[key].width = val.width;
}
if(val.height !== undefined) {
this.attrs[key].height = val.height;
}
break;
/*
* config properties that we don't want in attrs
*/
@@ -289,6 +303,18 @@ Kinetic.Node.prototype = {
setY: function(y) {
this.attrs.y = y;
},
/**
* get node x position
*/
getX: function() {
return this.attrs.x;
},
/**
* get node y position
*/
getY: function() {
return this.attrs.y;
},
/**
* set detection type
* @param {String} type can be "path" or "pixel"

52
src/shapes/Image.js
View File

@@ -12,8 +12,12 @@ Kinetic.Image = function(config) {
if(this.attrs === undefined) {
this.attrs = {};
}
this.attrs.cropX = 0;
this.attrs.cropY = 0;
this.attrs.crop = {
x: 0,
y: 0,
width: undefined,
height: undefined
};
// special
this.image = config.image;
@@ -23,16 +27,27 @@ Kinetic.Image = function(config) {
if(this.image !== undefined) {
var width = this.attrs.width !== undefined ? this.attrs.width : this.image.width;
var height = this.attrs.height !== undefined ? this.attrs.height : this.image.height;
var cropWidth = this.attrs.cropWidth !== undefined ? this.attrs.cropWidth : this.image.width;
var cropHeight = this.attrs.cropHeight !== undefined ? this.attrs.cropHeight : this.image.height;
var cropX = this.attrs.crop.x;
var cropY = this.attrs.crop.y;
var cropWidth = this.attrs.crop.width;
var cropHeight = this.attrs.crop.height;
var canvas = this.getCanvas();
var context = this.getContext();
context.beginPath();
this.applyLineJoin();
context.rect(0, 0, width, height);
context.closePath();
this.fillStroke();
context.drawImage(this.image,this.attrs.cropX, this.attrs.cropY, cropWidth, cropHeight, 0, 0, width, height);
// if cropping
if(cropWidth !== undefined && cropHeight !== undefined) {
context.drawImage(this.image, cropX, cropY, cropWidth, cropHeight, 0, 0, width, height);
}
// no cropping
else {
context.drawImage(this.image, 0, 0, width, height);
}
}
};
// call super constructor
@@ -102,26 +117,21 @@ Kinetic.Image.prototype = {
/**
* return cropping
*/
getCropping: function() {
return {
cropX: this.attrs.cropX,
cropY: this.attrs.cropY,
cropWidth: this.attrs.cropWidth,
cropHeight: this.attrs.cropHeight
};
getCrop: function() {
return this.attrs.crop;
},
/**
* set cropping
* @param {Number} cropX
* @param {Number} cropY
* @param {Number} cropWidth
* @param {Number} cropHeight
* @param {Object} crop
* @config {Number} [x] crop x
* @config {Number} [y] crop y
* @config {Number} [width] crop width
* @config {Number} [height] crop height
*/
setCropping: function() {
this.attrs.cropX = cropX;
this.attrs.cropY = cropY;
this.attrs.cropWidth = cropWidth;
this.attrs.cropHeight = cropHeight;
setCrop: function(config) {
var c = {};
c.crop = config;
this.setAttrs(c);
}
};
// extend Shape

10
src/shapes/Rect.js
View File

@@ -22,7 +22,7 @@ Kinetic.Rect = function(config) {
var context = this.getContext();
context.beginPath();
this.applyLineJoin();
if (this.attrs.cornerRadius === 0) {
if(this.attrs.cornerRadius === 0) {
// simple rect - don't bother doing all that complicated maths stuff.
context.rect(0, 0, this.attrs.width, this.attrs.height);
}
@@ -30,13 +30,13 @@ Kinetic.Rect = function(config) {
// arcTo would be nicer, but browser support is patchy (Opera)
context.moveTo(this.attrs.cornerRadius, 0);
context.lineTo(this.attrs.width - this.attrs.cornerRadius, 0);
context.arc(this.attrs.width - this.attrs.cornerRadius, this.attrs.cornerRadius, this.attrs.cornerRadius, Math.PI*3/2, 0, false);
context.arc(this.attrs.width - this.attrs.cornerRadius, this.attrs.cornerRadius, this.attrs.cornerRadius, Math.PI * 3 / 2, 0, false);
context.lineTo(this.attrs.width, this.attrs.height - this.attrs.cornerRadius);
context.arc(this.attrs.width - this.attrs.cornerRadius, this.attrs.height - this.attrs.cornerRadius, this.attrs.cornerRadius, 0, Math.PI/2, false);
context.arc(this.attrs.width - this.attrs.cornerRadius, this.attrs.height - this.attrs.cornerRadius, this.attrs.cornerRadius, 0, Math.PI / 2, false);
context.lineTo(this.attrs.cornerRadius, this.attrs.height);
context.arc(this.attrs.cornerRadius, this.attrs.height - this.attrs.cornerRadius, this.attrs.cornerRadius, Math.PI/2, Math.PI, false);
context.arc(this.attrs.cornerRadius, this.attrs.height - this.attrs.cornerRadius, this.attrs.cornerRadius, Math.PI / 2, Math.PI, false);
context.lineTo(0, this.attrs.cornerRadius);
context.arc(this.attrs.cornerRadius, this.attrs.cornerRadius, this.attrs.cornerRadius, Math.PI, Math.PI*3/2, false);
context.arc(this.attrs.cornerRadius, this.attrs.cornerRadius, this.attrs.cornerRadius, Math.PI, Math.PI * 3 / 2, false);
}
context.closePath();
this.fillStroke();