lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-10-22 03:47:31 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

added support for image hit detection with new color mapping algo

Browse Source
This commit is contained in:
Eric Rowell
2012-08-14 23:52:53 -07:00
parent 02c6c7276f
commit bae57488cf
6 changed files with 49 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
dist/kinetic-core.js vendored
View File

@@ -3,7 +3,7 @@
* http://www.kineticjs.com/
* Copyright 2012, Eric Rowell
* Licensed under the MIT or GPL Version 2 licenses.
* Date: Aug 13 2012
* Date: Aug 14 2012
*
* Copyright (C) 2011 - 2012 by Eric Rowell
*
@@ -39,7 +39,7 @@ Kinetic.Plugins = {};
Kinetic.Global = {
BUBBLE_WHITELIST: ['mousedown', 'mousemove', 'mouseup', 'mouseover', 'mouseout', 'click', 'dblclick', 'touchstart', 'touchmove', 'touchend', 'tap', 'dbltap', 'dragstart', 'dragmove', 'dragend'],
BUFFER_WHITELIST: ['fill', 'stroke', 'textFill', 'textStroke'],
BUFFER_BLACKLIST: ['shadow'],
BUFFER_BLACKLIST: ['shadow', 'image'],
stages: [],
idCounter: 0,
tempNodes: {},
@@ -4165,7 +4165,12 @@ Kinetic.Shape = Kinetic.Node.extend({
var wl = Kinetic.Global.BUFFER_WHITELIST;
var bl = Kinetic.Global.BUFFER_BLACKLIST;
var attrs = {};
if(canvas.name === 'buffer') {
if('image' in this.attrs) {
this.attrs.fill = '#' + this.colorKey;
}
for(var n = 0; n < wl.length; n++) {
var key = wl[n];
attrs[key] = this.attrs[key];
@@ -4178,6 +4183,7 @@ Kinetic.Shape = Kinetic.Node.extend({
attrs[key] = this.attrs[key];
this.attrs[key] = '';
}
context.globalAlpha = 1;
}
@@ -4491,7 +4497,6 @@ Kinetic.Image = Kinetic.Shape.extend({
this._super(config);
},
drawFunc: function(context) {
if(this.attrs.image) {
var width = this.getWidth();
var height = this.getHeight();
@@ -4501,6 +4506,8 @@ Kinetic.Image = Kinetic.Shape.extend({
this.fill(context);
this.stroke(context);
if(this.attrs.image) {
context.beginPath();
// if cropping
if(this.attrs.crop && this.attrs.crop.width && this.attrs.crop.height) {
var cropX = this.attrs.crop.x ? this.attrs.crop.x : 0;

6
dist/kinetic-core.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
src/Global.js
View File

@@ -11,7 +11,7 @@ Kinetic.Plugins = {};
Kinetic.Global = {
BUBBLE_WHITELIST: ['mousedown', 'mousemove', 'mouseup', 'mouseover', 'mouseout', 'click', 'dblclick', 'touchstart', 'touchmove', 'touchend', 'tap', 'dbltap', 'dragstart', 'dragmove', 'dragend'],
BUFFER_WHITELIST: ['fill', 'stroke', 'textFill', 'textStroke'],
BUFFER_BLACKLIST: ['shadow'],
BUFFER_BLACKLIST: ['shadow', 'image'],
stages: [],
idCounter: 0,
tempNodes: {},

6
src/Shape.js
View File

@@ -355,7 +355,12 @@ Kinetic.Shape = Kinetic.Node.extend({
var wl = Kinetic.Global.BUFFER_WHITELIST;
var bl = Kinetic.Global.BUFFER_BLACKLIST;
var attrs = {};
if(canvas.name === 'buffer') {
if('image' in this.attrs) {
this.attrs.fill = '#' + this.colorKey;
}
for(var n = 0; n < wl.length; n++) {
var key = wl[n];
attrs[key] = this.attrs[key];
@@ -368,6 +373,7 @@ Kinetic.Shape = Kinetic.Node.extend({
attrs[key] = this.attrs[key];
this.attrs[key] = '';
}
context.globalAlpha = 1;
}

3
src/shapes/Image.js
View File

@@ -19,7 +19,6 @@ Kinetic.Image = Kinetic.Shape.extend({
this._super(config);
},
drawFunc: function(context) {
if(this.attrs.image) {
var width = this.getWidth();
var height = this.getHeight();
@@ -29,6 +28,8 @@ Kinetic.Image = Kinetic.Shape.extend({
this.fill(context);
this.stroke(context);
if(this.attrs.image) {
context.beginPath();
// if cropping
if(this.attrs.crop && this.attrs.crop.width && this.attrs.crop.height) {
var cropX = this.attrs.crop.x ? this.attrs.crop.x : 0;

24
tests/js/unitTests.js
View File

@@ -1463,7 +1463,7 @@ Test.prototype.tests = {
stage.add(layer);
},
'SHAPE - add image': function(containerId) {
'*SHAPE - add image': function(containerId) {
var imageObj = new Image();
imageObj.onload = function() {
var stage = new Kinetic.Stage({
@@ -1482,12 +1482,13 @@ Test.prototype.tests = {
height: 100,
offset: [50, 30],
crop: [135, 7, 167, 134],
cornerRadius: 20
draggable: true
});
layer.add(darth);
stage.add(layer);
/*
darth.setHeight(200);
layer.draw();
@@ -1509,9 +1510,6 @@ Test.prototype.tests = {
test(crop.width === 167, 'crop width should be 167');
test(crop.height === 134, 'crop height should be134');
/*
* test cropping setter
*/
darth.setCrop(0, 1, 2, 3);
crop = darth.getCrop();
test(crop.x === 0, 'crop x should be 0');
@@ -1538,9 +1536,6 @@ Test.prototype.tests = {
test(crop.width === 10, 'crop width should be 10');
test(crop.height === 11, 'crop height should be 11');
/*
* test crop partial setter
*/
darth.setCrop({
x: 12
});
@@ -1576,6 +1571,9 @@ Test.prototype.tests = {
test(crop.y === 13, 'crop y should be 13');
test(crop.width === 14, 'crop width should be 14');
test(crop.height === 15, 'crop height should be 15');
*/
document.body.appendChild(layer.bufferCanvas.element)
};
imageObj.src = '../assets/darth-vader.jpg';
@@ -2631,7 +2629,7 @@ Test.prototype.tests = {
test(group.get('Group').length === 0, 'group should have 0 groups');
},
'*SHAPE - text getters and setters': function(containerId) {
'SHAPE - text getters and setters': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
@@ -2676,7 +2674,6 @@ Test.prototype.tests = {
* test getters and setters
*/
/*
test(text.getX() === stage.getWidth() / 2, 'text box x should be in center of stage');
test(text.getY() === stage.getHeight() / 2, 'text box y should be in center of stage');
test(text.getStroke() === '#555', 'text box stroke should be #555');
@@ -2696,7 +2693,6 @@ Test.prototype.tests = {
test(text.getShadow().color === 'black', 'text box shadow color should be black');
test(text.getCornerRadius() === 10, 'text box corner radius should be 10');
test(text.getDraggable() === true, 'text should be draggable');
test(text.getDetectionType() === 'path', 'text detection type should be path');
test(text.getBoxWidth() === 400, 'box width should be 400');
test(text.getBoxHeight() === 100, 'box height should be 100');
@@ -2723,7 +2719,6 @@ Test.prototype.tests = {
});
text.setCornerRadius(20);
text.setDraggable(false);
text.setDetectionType('pixel');
test(text.getX() === 1, 'text box x should be 1');
test(text.getY() === 2, 'text box y should be 2');
@@ -2743,9 +2738,8 @@ Test.prototype.tests = {
test(text.getShadow().color === 'green', 'text box shadow color should be green');
test(text.getCornerRadius() === 20, 'text box corner radius should be 20');
test(text.getDraggable() === false, 'text draggable should be false');
test(text.getDetectionType() === 'pixel', 'text detection type should be pixel');
*/
document.body.appendChild(layer.bufferCanvas.element)
//document.body.appendChild(layer.bufferCanvas.element)
//layer.setListening(false);
layer.drawBuffer();