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

Merge branch 'master' of github.com:ericdrowell/KineticJS

Browse Source
This commit is contained in:
Eric Rowell
2013-08-27 22:09:35 -07:00
parent 4665a2d002 2f10116f55
commit 188bf2d8d0
6 changed files with 122 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/Stage.js
View File

@@ -523,9 +523,10 @@
}
},
_setMousePosition: function(evt) {
var mouseX = evt.clientX - this._getContentPosition().left,
mouseY = evt.clientY - this._getContentPosition().top;
var mouseX = evt.offsetX !== undefined ? evt.offsetX : evt.layerX || (evt.clientX - this._getContentPosition().left),
mouseY = evt.offsetY !== undefined ? evt.offsetY : evt.layerY || (evt.clientY - this._getContentPosition().top);
this.mousePos = {
x: mouseX,
y: mouseY

17
src/plugins/Path.js
View File

@@ -1,4 +1,4 @@
(function() {
(function () {
/**
* Path constructor.
* @author Jason Follas
@@ -18,12 +18,12 @@
* scale: 2<br>
* });
*/
Kinetic.Path = function(config) {
Kinetic.Path = function (config) {
this.___init(config);
};
Kinetic.Path.prototype = {
___init: function(config) {
___init: function (config) {
this.dataArray = [];
var that = this;
@@ -32,15 +32,15 @@
this.className = 'Path';
this.dataArray = Kinetic.Path.parsePathData(this.getData());
this.on('dataChange.kinetic', function() {
this.on('dataChange.kinetic', function () {
that.dataArray = Kinetic.Path.parsePathData(this.getData());
});
},
drawFunc: function(canvas) {
drawFunc: function (canvas) {
var ca = this.dataArray, context = canvas.getContext();
// context position
context.beginPath();
for(var n = 0; n < ca.length; n++) {
for (var n = 0; n < ca.length; n++) {
var c = ca[n].command;
var p = ca[n].points;
switch (c) {
@@ -77,7 +77,10 @@
break;
}
}
canvas.fillStroke(this);
if (this.getFill() !== undefined)
canvas.fill(this);
canvas.stroke(this);
}
};
Kinetic.Util.extend(Kinetic.Path, Kinetic.Shape);

3
src/plugins/TextPath.js
View File

@@ -226,7 +226,8 @@
else
currentT -= Math.PI / 360.0 * dTheta / Math.abs(dTheta);
if(Math.abs(currentT) > Math.abs(end)) {
// Credit for bug fix: @therth https://github.com/ericdrowell/KineticJS/issues/249
if(dTheta < 0 && currentT < end || dTheta >= 0 && currentT > end) {
currentT = end;
needNewSegment = true;
}

19
src/shapes/Image.js
View File

@@ -1,4 +1,5 @@
(function() {
// CONSTANTS
var IMAGE = 'Image',
CROP = 'crop',
@@ -118,16 +119,22 @@
filter = this.getFilter(),
filterCanvas, context, imageData;
filterCanvas = this.filterCanvas = new Kinetic.SceneCanvas({
width: width,
height: height
});
if (this.filterCanvas){
filterCanvas = this.filterCanvas;
filterCanvas.clear();
}
else {
filterCanvas = this.filterCanvas = new Kinetic.SceneCanvas({
width: width,
height: height,
pixelRatio: 1
});
}
context = filterCanvas.getContext();
try {
this._drawImage(context, [image, 0, 0, width, height]);
this._drawImage(context, [image, 0, 0, filterCanvas.getWidth(), filterCanvas.getHeight()]);
imageData = context.getImageData(0, 0, filterCanvas.getWidth(), filterCanvas.getHeight());
filter.call(this, imageData);
context.putImageData(imageData, 0, 0);

70
tests/js/manualTests.js
View File

@@ -218,10 +218,10 @@ Test.Modules.Tween = {
easing: Kinetic.Easings.BounceEaseOut,
yoyo: false,
onFinish: function() {
console.log('finished!')
console.log('finished!');
},
onReset: function() {
console.log('reset!')
console.log('reset!');
}
});
@@ -273,7 +273,7 @@ Test.Modules.Tween = {
easing: Kinetic.Easings.BounceEaseOut,
yoyo: false,
onFinish: function() {
console.log('finished!')
console.log('finished!');
}
});
@@ -284,7 +284,7 @@ Test.Modules.Tween = {
Test.Modules.ANIMATION = {
'start and stop animation': function(containerId) {
'start and stop animation': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
@@ -495,6 +495,56 @@ Test.Modules.EVENTS = {
layer.add(circle);
stage.add(layer);
},
'_setMousePosition on a 3D-transformed container - drag red circle': function(containerId) {
var container = document.getElementById(containerId);
container.style.transform = 'perspective(500px) rotateX(45deg)';
container.style.webkitTransform = 'perspective(500px) rotateX(45deg) translate3D(80px,80px,100px)';
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
layer.add(new Kinetic.Rect({
x: 0,
y: 0,
width: stage.getWidth(),
height: stage.getHeight(),
fill: '#ccf'
}));
layer.add(new Kinetic.Line({
points: [289, 0, 289, 200],
stroke: 'black',
strokeWidth: 2
}));
layer.add(new Kinetic.Line({
points: [0, 100, 578, 100],
stroke: 'black',
strokeWidth: 2
}));
var clickShape = new Kinetic.Circle({
x:289,
y:100,
radius:10,
fill:'red',
draggable:true
});
clickShape.on("click tap", function(evt) {
layer.add(new Kinetic.Circle({x:evt.offsetX,y:evt.offsetY,radius:5,fill:'blue'}));
layer.draw();
evt.cancelBubble = true;
});
layer.add(clickShape);
stage.add(layer);
},
'modify fill stroke and stroke width on hover with star': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
@@ -1030,7 +1080,7 @@ Test.Modules.DRAG_AND_DROP = {
radius: 70,
fill: 'red',
stroke: 'black',
strokeWidth: 4,
strokeWidth: 4
});
Circle.setDraggable(true);
@@ -1076,7 +1126,7 @@ Test.Modules.DRAG_AND_DROP = {
layer.add(Circle);
stage.add(layer);
showHit(layer)
showHit(layer);
},
'draggable true': function(containerId) {
var stage = new Kinetic.Stage({
@@ -1085,7 +1135,7 @@ Test.Modules.DRAG_AND_DROP = {
height: 200
});
var layer = new Kinetic.Layer({
id: 'myLayer'
id: 'myLayer'
});
var circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
@@ -1224,7 +1274,6 @@ Test.Modules.DRAG_AND_DROP = {
text: "diagonal",
fill: "black",
padding: 15,
draggable: true,
dragBoundFunc: function(pos) {
p = (pos.y + pos.x) / 2;
return {
@@ -1242,7 +1291,6 @@ Test.Modules.DRAG_AND_DROP = {
strokeWidth: 4,
draggable: true,
fontSize: 18,
draggable: true,
dragBoundFunc: function(pos) {
var circle = {
x: 280,
@@ -1374,7 +1422,7 @@ Test.Modules.DRAG_AND_DROP = {
return {
x: newX,
y: this.getY()
}
};
}
});
@@ -1540,7 +1588,7 @@ Test.Modules.DRAG_AND_DROP = {
fill: 'yellow',
stroke: 'black',
strokeWidth: 4,
draggable: true,
draggable: true
});
layer.add(rect).add(rect2);

37
tests/js/unit/plugins/pathTests.js
View File

@@ -390,7 +390,7 @@ Test.Modules.PATH = {
layer.add(group);
stage.add(layer);
showHit(layer);
showHit(layer);
},
'Able to determine point on line some distance from another point on line': function(containerId) {
@@ -803,5 +803,38 @@ Test.Modules.PATH = {
});
layer.add(borneo);
stage.add(layer);
}
},
'Stroke only when no fill': function(containerId) {
// https://github.com/ericdrowell/KineticJS/issues/567
var stage = new Kinetic.Stage({
container: containerId,
width: 1024,
height: 480,
throttle: 80,
scale: 0.75,
x: 10,
y: 10
});
var layer = new Kinetic.Layer();
var path = new Kinetic.Path({
data: "M 50 0 C 50 150 170 170 200 170",
stroke: 'black'
});
path.on('mouseover', function () {
this.setStroke("#f00");
layer.draw();
});
path.on('mouseout', function(){
this.setStroke("#000");
layer.draw();
});
layer.add(path);
stage.add(layer);
}
};