This commit is contained in:
Лаврёнов Антон 2014-02-27 09:13:55 +08:00
commit 098fabbfc1
13 changed files with 652 additions and 488 deletions

View File

@ -2,14 +2,21 @@
// calculate pixel ratio
var canvas = document.createElement('canvas'),
context = canvas.getContext('2d'),
devicePixelRatio = window.devicePixelRatio || 1,
// if using a mobile device, calculate the pixel ratio. Otherwise, just use
// 1. For desktop browsers, if the user has zoom enabled, it affects the pixel ratio
// and causes artifacts on the canvas. As of 02/26/2014, there doesn't seem to be a way
// to reliably calculate the browser zoom for modern browsers, which is why we just set
// the pixel ratio to 1 for desktops
_pixelRatio = Kinetic.UA.mobile ? (function() {
var devicePixelRatio = window.devicePixelRatio || 1,
backingStoreRatio = context.webkitBackingStorePixelRatio
|| context.mozBackingStorePixelRatio
|| context.msBackingStorePixelRatio
|| context.oBackingStorePixelRatio
|| context.backingStorePixelRatio
|| 1,
_pixelRatio = devicePixelRatio / backingStoreRatio;
|| 1;
return devicePixelRatio / backingStoreRatio;
})() : 1;
/**
* Canvas Renderer constructor

View File

@ -50,6 +50,7 @@ var Kinetic = {};
traceArrMax: 100,
dblClickWindow: 400,
pixelRatio: undefined,
enableThrottling: true,
// user agent
UA: (function() {
@ -60,11 +61,17 @@ var Kinetic = {};
/(opera)(?:.*version|)[ \/]([\w.]+)/.exec( ua ) ||
/(msie) ([\w.]+)/.exec( ua ) ||
ua.indexOf('compatible') < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec( ua ) ||
[];
[],
// adding mobile flag as well
mobile = !!(navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i));
return {
browser: match[ 1 ] || '',
version: match[ 2 ] || '0'
version: match[ 2 ] || '0',
// adding mobile flab
mobile: mobile
};
})(),

View File

@ -342,9 +342,12 @@
}
},
_mouseover: function(evt) {
if (!Kinetic.UA.mobile) {
this._fire(CONTENT_MOUSEOVER, evt);
}
},
_mouseout: function(evt) {
if (!Kinetic.UA.mobile) {
this._setPointerPosition(evt);
var targetShape = this.targetShape;
@ -356,8 +359,10 @@
this.pointerPos = undefined;
this._fire(CONTENT_MOUSEOUT, evt);
}
},
_mousemove: function(evt) {
_mousemove: Kinetic.Util._throttle(function(evt) {
if (!Kinetic.UA.mobile) {
this._setPointerPosition(evt);
var dd = Kinetic.DD,
shape = this.getIntersection(this.getPointerPosition());
@ -395,14 +400,16 @@
if(dd) {
dd._drag(evt);
}
}
// always call preventDefault for desktop events because some browsers
// try to drag and drop the canvas element
if (evt.preventDefault) {
evt.preventDefault();
}
},
}, 17),
_mousedown: function(evt) {
if (!Kinetic.UA.mobile) {
this._setPointerPosition(evt);
var shape = this.getIntersection(this.getPointerPosition());
@ -415,6 +422,7 @@
// content event
this._fire(CONTENT_MOUSEDOWN, evt);
}
// always call preventDefault for desktop events because some browsers
// try to drag and drop the canvas element
@ -423,8 +431,10 @@
}
},
_mouseup: function(evt) {
if (!Kinetic.UA.mobile) {
this._setPointerPosition(evt);
var shape = this.getIntersection(this.getPointerPosition()),
var that = this,
shape = this.getIntersection(this.getPointerPosition()),
clickStartShape = this.clickStartShape,
fireDblClick = false;
@ -462,6 +472,7 @@
}
Kinetic.listenClickTap = false;
}
// always call preventDefault for desktop events because some browsers
// try to drag and drop the canvas element
@ -530,7 +541,7 @@
Kinetic.listenClickTap = false;
},
_touchmove: function(evt) {
_touchmove: Kinetic.Util._throttle(function(evt) {
this._setPointerPosition(evt);
var dd = Kinetic.DD,
shape = this.getIntersection(this.getPointerPosition());
@ -549,7 +560,7 @@
if(dd) {
dd._drag(evt);
}
},
}, 17),
_setPointerPosition: function(evt) {
var contentPosition = this._getContentPosition(),
offsetX = evt.offsetX,

View File

@ -319,6 +319,40 @@
_isString: function(obj) {
return Object.prototype.toString.call(obj) == OBJECT_STRING;
},
// Returns a function, that, when invoked, will only be triggered at most once
// during a given window of time. Normally, the throttled function will run
// as much as it can, without ever going more than once per `wait` duration;
// but if you'd like to disable the execution on the leading edge, pass
// `{leading: false}`. To disable execution on the trailing edge, ditto.
_throttle: function(func, wait, options) {
var context, args, result;
var timeout = null;
var previous = 0;
options || (options = {});
var later = function() {
previous = options.leading === false ? 0 : new Date().getTime();
timeout = null;
result = func.apply(context, args);
context = args = null;
};
return function() {
var now = new Date().getTime();
if (!previous && options.leading === false) previous = now;
var remaining = wait - (now - previous);
context = this;
args = arguments;
if (remaining <= 0) {
clearTimeout(timeout);
timeout = null;
previous = now;
result = func.apply(context, args);
context = args = null;
} else if (!timeout && options.trailing !== false) {
timeout = setTimeout(later, remaining);
}
return result;
};
},
/*
* other utils
*/

View File

@ -13,6 +13,7 @@
* @param {String} [config.fontFamily] default is Calibri
* @param {Number} [config.fontSize] default is 12
* @param {String} [config.fontStyle] can be normal, bold, or italic. Default is normal
* @param {String} [config.fontVariant] can be normal or small-caps. Default is normal
* @param {String} config.text
* @param {String} config.data SVG data string
* @@shapeParams
@ -380,6 +381,23 @@
* @memberof Kinetic.TextPath.prototype
*/
Kinetic.Factory.addGetterSetter(Kinetic.TextPath, 'fontVariant', NORMAL);
/**
* set font variant. Can be 'normal' or 'small-caps'. 'normal' is the default.
* @name setFontVariant
* @method
* @memberof Kinetic.TextPath.prototype
* @param {String} fontVariant
*/
/**
* @get font variant
* @name getFontVariant
* @method
* @memberof Kinetic.TextPath.prototype
*/
Kinetic.Factory.addGetter(Kinetic.TextPath, 'text', EMPTY_STRING);
/**

View File

@ -18,7 +18,7 @@
WORD = 'word',
CHAR = 'char',
NONE = 'none',
ATTR_CHANGE_LIST = ['fontFamily', 'fontSize', 'fontStyle', 'padding', 'align', 'lineHeight', 'text', 'width', 'height', 'wrap'],
ATTR_CHANGE_LIST = ['fontFamily', 'fontSize', 'fontStyle', 'fontVariant', 'padding', 'align', 'lineHeight', 'text', 'width', 'height', 'wrap'],
// cached variables
attrChangeListLen = ATTR_CHANGE_LIST.length,
@ -33,6 +33,7 @@
* @param {String} [config.fontFamily] default is Arial
* @param {Number} [config.fontSize] in pixels. Default is 12
* @param {String} [config.fontStyle] can be normal, bold, or italic. Default is normal
* @param {String} [config.fontVariant] can be normal or small-caps. Default is normal
* @param {String} config.text
* @param {String} [config.align] can be left, center, or right
* @param {Number} [config.padding]
@ -193,7 +194,7 @@
};
},
_getContextFont: function() {
return this.getFontStyle() + SPACE + this.getFontSize() + PX_SPACE + this.getFontFamily();
return this.getFontStyle() + SPACE + this.getFontVariant() + SPACE + this.getFontSize() + PX_SPACE + this.getFontFamily();
},
_addTextLine: function (line, width) {
return this.textArr.push({text: line, width: width});
@ -220,7 +221,7 @@
this.textArr = [];
dummyContext.save();
dummyContext.font = this.getFontStyle() + SPACE + fontSize + PX_SPACE + this.getFontFamily();
dummyContext.font = this._getContextFont();
for (var i = 0, max = lines.length; i < max; ++i) {
var line = lines[i],
lineWidth = this._getTextWidth(line);
@ -364,6 +365,23 @@
* text.fontStyle('bold');
*/
Kinetic.Factory.addGetterSetter(Kinetic.Text, 'fontVariant', NORMAL);
/**
* set font variant. Can be 'normal' or 'small-caps'. 'normal' is the default.
* @name fontVariant
* @method
* @memberof Kinetic.Text.prototype
* @param {String} fontVariant
* @returns {String}
* @example
* // get font variant<br>
* var fontVariant = text.fontVariant();<br><br>
*
* // set font variant<br>
* text.fontVariant('small-caps');
*/
Kinetic.Factory.addGetterSetter(Kinetic.Text, 'padding', 0);
/**

View File

@ -1,6 +1,6 @@
suite('DragAndDropEvents', function() {
// ======================================================
test('test dragstart, dragmove, dragend', function() {
test('test dragstart, dragmove, dragend', function(done) {
var stage = addStage();
var layer = new Kinetic.Layer();
@ -89,6 +89,7 @@ suite('DragAndDropEvents', function() {
assert(!Kinetic.isDragging(), ' isDragging() should be false 5');
assert(Kinetic.isDragReady(), ' isDragReady()) should be true 6');
setTimeout(function() {
stage._mousemove({
clientX: 100,
clientY: 98 + top
@ -130,10 +131,13 @@ suite('DragAndDropEvents', function() {
showHit(layer);
done();
}, 20);
});
// ======================================================
test('destroy shape while dragging', function() {
test('destroy shape while dragging', function(done) {
var stage = addStage();
var layer = new Kinetic.Layer();
@ -194,6 +198,7 @@ suite('DragAndDropEvents', function() {
assert(!circle.isDragging(), 'circle should not be dragging');
setTimeout(function() {
stage._mousemove({
clientX: 100,
clientY: 98 + top
@ -212,13 +217,14 @@ suite('DragAndDropEvents', function() {
assert(!circle.isDragging(), 'destroying circle should stop drag and drop');
assert(dragEnd, 'dragEnd should have fired');
done();
}, 20);
});
// ======================================================
test('click should not occur after drag and drop', function() {
test('click should not occur after drag and drop', function(done) {
var stage = addStage();
var layer = new Kinetic.Layer();
@ -253,6 +259,7 @@ suite('DragAndDropEvents', function() {
clientY: 40 + top
});
setTimeout(function() {
stage._mousemove({
clientX: 100,
clientY: 100 + top
@ -267,10 +274,13 @@ suite('DragAndDropEvents', function() {
assert(!clicked, 'click event should not have been fired');
done();
}, 20);
});
// ======================================================
test('cancel drag and drop by setting draggable to false', function() {
test('cancel drag and drop by setting draggable to false', function(done) {
var stage = addStage();
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
@ -316,6 +326,7 @@ suite('DragAndDropEvents', function() {
clientY: 100 + top
});
setTimeout(function() {
stage._mousemove({
clientX: 100,
clientY: 100 + top
@ -330,10 +341,12 @@ suite('DragAndDropEvents', function() {
assert.equal(circle.getPosition().x, 380, 'circle x should be 380');
assert.equal(circle.getPosition().y, 100, 'circle y should be 100');
done();
}, 20);
});
// ======================================================
test('drag and drop layer', function() {
test('drag and drop layer', function(done) {
var stage = addStage();
var layer = new Kinetic.Layer({
drawFunc: function() {
@ -378,6 +391,7 @@ suite('DragAndDropEvents', function() {
clientY: 96 + top
});
setTimeout(function() {
stage._mousemove({
clientX: 210,
clientY: 109 + top
@ -395,10 +409,13 @@ suite('DragAndDropEvents', function() {
assert.equal(layer.getX(), -189, 'layer x should be -189');
assert.equal(layer.getY(), 13, 'layer y should be 13');
done();
}, 20);
});
// ======================================================
test('drag and drop stage', function() {
test('drag and drop stage', function(done) {
var container = document.createElement('div'),
stage = new Kinetic.Stage({
container: container,
@ -436,6 +453,7 @@ suite('DragAndDropEvents', function() {
clientY: 100 + top
});
setTimeout(function() {
stage._mousemove({
clientX: 300,
clientY: 110 + top
@ -451,6 +469,8 @@ suite('DragAndDropEvents', function() {
assert.equal(stage.getX(), 300);
assert.equal(stage.getY(), 10);
done();
}, 20);
});
});

View File

@ -1,7 +1,10 @@
suite('MouseEvents', function() {
// NOTE: disable throttling so these tests can run synchronously
Kinetic.enableThrottling = false;
// ======================================================
test('stage content mouse events', function() {
test('stage content mouse events', function(done) {
var stage = addStage();
var layer = new Kinetic.Layer();
@ -112,6 +115,7 @@ suite('MouseEvents', function() {
assert.equal(stageContentMouseup, 3);
//assert.equal(stageContentDblClick, 1);
setTimeout(function() {
stage._mousemove({
clientX: 200,
clientY: 1 + top
@ -132,6 +136,9 @@ suite('MouseEvents', function() {
});
assert.equal(stageContentMouseover, 1);
done();
}, 20);
});
@ -395,7 +402,7 @@ suite('MouseEvents', function() {
});
// ======================================================
test('modify fill stroke and stroke width on hover with circle', function() {
test('modify fill stroke and stroke width on hover with circle', function(done) {
var stage = addStage();
var layer = new Kinetic.Layer({
throttle: 999
@ -433,6 +440,7 @@ suite('MouseEvents', function() {
assert.equal(circle.getFill(), 'red', 'circle fill should be red');
assert.equal(circle.getStroke(), 'black', 'circle stroke should be black');
setTimeout(function() {
stage._mousemove({
clientX: 377,
clientY: 101 + top
@ -441,22 +449,23 @@ suite('MouseEvents', function() {
assert.equal(circle.getFill(), 'yellow', 'circle fill should be yellow');
assert.equal(circle.getStroke(), 'purple', 'circle stroke should be purple');
setTimeout(function() {
// move mouse back out of circle
stage._mousemove({
clientX: 157,
clientY: 138 + top
});
stage._mousemove({
clientX: 157,
clientY: 138 + top
});
assert.equal(circle.getFill(), 'red', 'circle fill should be red');
assert.equal(circle.getStroke(), 'black', 'circle stroke should be black');
done();
}, 20);
}, 20);
});
// ======================================================
test('mousedown mouseup mouseover mouseout mousemove click dblclick', function() {
test('mousedown mouseup mouseover mouseout mousemove click dblclick', function(done) {
var stage = addStage();
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
@ -518,6 +527,7 @@ suite('MouseEvents', function() {
var top = stage.content.getBoundingClientRect().top;
setTimeout(function() {
// move mouse to center of circle to trigger mouseover
stage._mousemove({
clientX: 290,
@ -532,6 +542,7 @@ suite('MouseEvents', function() {
assert(!dblclick, '1) dblclick should be false');
assert(!mouseout, '1) mouseout should be false');
setTimeout(function() {
// move mouse again inside circle to trigger mousemove
stage._mousemove({
clientX: 290,
@ -602,15 +613,12 @@ suite('MouseEvents', function() {
assert(dblclick, '6) dblclick should be true');
assert(!mouseout, '6) mouseout should be false');
setTimeout(function() {
// move mouse outside of circle to trigger mouseout
stage._mousemove({
clientX: 0,
clientY: 100 + top
});
stage._mousemove({
clientX: 0,
clientY: 100 + top
});
assert(mouseover, '7) mouseover should be true');
assert(mousemove, '7) mousemove should be true');
@ -619,6 +627,10 @@ suite('MouseEvents', function() {
assert(click, '7) click should be true');
assert(dblclick, '7) dblclick should be true');
assert(mouseout, '7) mouseout should be true');
done();
}, 20);
}, 20);
}, 20);
});
// ======================================================
@ -700,7 +712,7 @@ suite('MouseEvents', function() {
});
// ======================================================
test('group mouseenter events', function() {
test('group mouseenter events', function(done) {
var stage = addStage();
var layer = new Kinetic.Layer();
var group = new Kinetic.Group({
@ -772,6 +784,7 @@ suite('MouseEvents', function() {
var top = stage.content.getBoundingClientRect().top;
setTimeout(function() {
// move mouse outside of circles
stage._mousemove({
clientX: 177,
@ -785,6 +798,7 @@ suite('MouseEvents', function() {
assert.equal(groupMouseenters, 0, 'groupMouseenters should be 0');
assert.equal(groupMouseleaves, 0, 'groupMouseleaves should be 0');
setTimeout(function() {
// move mouse inside of red circle
stage._mousemove({
clientX: 236,
@ -800,6 +814,7 @@ suite('MouseEvents', function() {
assert.equal(groupMouseenters, 1, 'groupMouseenters should be 1');
assert.equal(groupMouseleaves, 0, 'groupMouseleaves should be 0');
setTimeout(function() {
// move mouse inside of green circle
stage._mousemove({
clientX: 284,
@ -813,16 +828,14 @@ suite('MouseEvents', function() {
assert.equal(groupMouseenters, 1, 'groupMouseenters should be 1');
assert.equal(groupMouseleaves, 0, 'groupMouseleaves should be 0');
setTimeout(function() {
// move mouse back to red circle
stage._mousemove({
clientX: 345,
clientY: 105 + top
});
stage._mousemove({
clientX: 345,
clientY: 105 + top
});
assert.equal(redMouseenters, 2, 'redMouseenters should be 2');
assert.equal(redMouseleaves, 1, 'redMouseleaves should be 1');
@ -831,15 +844,13 @@ suite('MouseEvents', function() {
assert.equal(groupMouseenters, 1, 'groupMouseenters should be 1');
assert.equal(groupMouseleaves, 0, 'groupMouseleaves should be 0');
setTimeout(function() {
// move mouse outside of circles
stage._mousemove({
clientX: 177,
clientY: 146 + top
});
stage._mousemove({
clientX: 177,
clientY: 146 + top
});
assert.equal(redMouseenters, 2, 'redMouseenters should be 2');
assert.equal(redMouseleaves, 2, 'redMouseleaves should be 2');
assert.equal(greenMouseenters, 1, 'greenMouseenters should be 1');
@ -851,6 +862,13 @@ suite('MouseEvents', function() {
//layer.bufferCanvas.element.style.marginTop = '220px';
done();
}, 20);
}, 20);
}, 20);
}, 20);
}, 20);
});
// ======================================================
@ -923,7 +941,7 @@ suite('MouseEvents', function() {
});
// ======================================================
test('test custom circle hit function', function() {
test('test custom circle hit function', function(done) {
var stage = addStage();
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
@ -960,12 +978,17 @@ suite('MouseEvents', function() {
circle.on('mouseout', function() {
mouseouts++;
});
setTimeout(function() {
// move mouse far outside circle
stage._mousemove({
clientX: 113,
clientY: 112 + top
});
setTimeout(function() {
assert.equal(mouseovers, 0, '1) mouseovers should be 0');
assert.equal(mouseouts, 0, '1) mouseouts should be 0');
@ -977,6 +1000,7 @@ suite('MouseEvents', function() {
assert.equal(mouseovers, 1, '2) mouseovers should be 1');
assert.equal(mouseouts, 0, '2)mouseouts should be 0');
setTimeout(function() {
stage._mousemove({
clientX: 113,
clientY: 112 + top
@ -1002,6 +1026,7 @@ suite('MouseEvents', function() {
layer.getHitCanvas().getContext().clear();
layer.drawHit();
setTimeout(function() {
// move mouse far outside circle
stage._mousemove({
@ -1012,6 +1037,8 @@ suite('MouseEvents', function() {
assert.equal(mouseovers, 1, '4) mouseovers should be 1');
assert.equal(mouseouts, 1, '4) mouseouts should be 1');
setTimeout(function() {
stage._mousemove({
clientX: 286,
clientY: 118 + top
@ -1020,6 +1047,7 @@ suite('MouseEvents', function() {
assert.equal(mouseovers, 1, '5) mouseovers should be 1');
assert.equal(mouseouts, 1, '5) mouseouts should be 1');
setTimeout(function() {
stage._mousemove({
clientX: 321,
clientY: 112 + top
@ -1028,6 +1056,7 @@ suite('MouseEvents', function() {
assert.equal(mouseovers, 1, '6) mouseovers should be 1');
assert.equal(mouseouts, 1, '6) mouseouts should be 1');
setTimeout(function() {
// move to center of circle
stage._mousemove({
clientX: 375,
@ -1037,5 +1066,14 @@ suite('MouseEvents', function() {
assert.equal(mouseovers, 2, '7) mouseovers should be 2');
assert.equal(mouseouts, 1, '7) mouseouts should be 1');
done();
}, 20);
}, 20);
}, 20);
}, 20);
}, 20);
}, 20);
}, 20);
});
});

View File

@ -92,7 +92,7 @@ suite('TouchEvents', function() {
// ======================================================
test('touchstart touchend touchmove tap dbltap', function() {
test('touchstart touchend touchmove tap dbltap', function(done) {
var stage = addStage();
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
@ -215,6 +215,7 @@ suite('TouchEvents', function() {
assert(tap, '11) tap should be true');
assert(dbltap, '11) dbltap should be true');
setTimeout(function() {
// touchmove circle
stage._touchmove({
touches: [{
@ -230,5 +231,8 @@ suite('TouchEvents', function() {
assert(touchend, '12) touchend should be true');
assert(tap, '12) tap should be true');
assert(dbltap, '12) dbltap should be true');
done();
}, 17);
});
});

View File

@ -102,7 +102,6 @@
<script src="functional/MouseEvents-test.js"></script>
<script src="functional/TouchEvents-test.js"></script>
<script src="functional/KineticEvents-test.js"></script>
<script src="functional/DragAndDropEvents-test.js"></script>
<!--=============== manual tests ================-->

View File

@ -1,7 +1,7 @@
suite('DragAndDrop', function() {
// ======================================================
test('test drag and drop properties and methods', function() {
test('test drag and drop properties and methods', function(done) {
var stage = addStage();
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
@ -16,6 +16,9 @@ suite('DragAndDrop', function() {
stage.add(layer);
layer.add(circle);
setTimeout(function() {
layer.draw();
// test defaults
@ -33,6 +36,10 @@ suite('DragAndDrop', function() {
// test new properties
assert.equal(circle.getDraggable(), true);
done();
}, 50);
});
// ======================================================

View File

@ -72,7 +72,7 @@ suite('Sprite', function() {
};
imageObj.src = 'assets/scorpion-sprite.png';
});
test('can change frame rate on fly', function(done){
test.skip('can change frame rate on fly', function(done){
var imageObj = new Image();
imageObj.onload = function() {
var stage = addStage();
@ -122,9 +122,6 @@ suite('Sprite', function() {
assert.equal(sprite.frameIndex() > 2, true);
done();
}, 68);
};
imageObj.src = 'assets/scorpion-sprite.png';
});

View File

@ -67,6 +67,7 @@ suite('Text', function(){
fontSize: 50,
fontFamily: 'Calibri',
fontStyle: 'normal',
fontVariant: 'normal',
fill: '#888',
stroke: '#333',
align: 'right',
@ -97,6 +98,7 @@ suite('Text', function(){
assert.equal(text.getFontSize(), 50);
assert.equal(text.getFontFamily(), 'Calibri');
assert.equal(text.getFontStyle(), 'normal');
assert.equal(text.getFontVariant(), 'normal');
assert.equal(text.getFill(), '#888');
assert.equal(text.getStroke(), '#333');
assert.equal(text.getAlign(), 'right');
@ -117,6 +119,7 @@ suite('Text', function(){
text.setFontSize(10);
text.setFontFamily('Arial');
text.setFontStyle('bold');
text.setFontVariant('small-caps');
text.setFill('green');
text.setStroke('yellow');
text.setAlign('left');
@ -132,6 +135,7 @@ suite('Text', function(){
assert.equal(text.getFontSize(), 10);
assert.equal(text.getFontFamily(), 'Arial');
assert.equal(text.getFontStyle(), 'bold');
assert.equal(text.getFontVariant(), 'small-caps');
assert.equal(text.getFill(), 'green');
assert.equal(text.getStroke(), 'yellow');
assert.equal(text.getAlign(), 'left');