mirror of
https://github.com/konvajs/konva.git
synced 2025-09-18 18:27:58 +08:00
removed flip and mirror filters because the same effect can be achieved with transforms, cloning, caching, etc.
This commit is contained in:
Eric Rowell
@@ -18,9 +18,7 @@ module.exports = function(grunt) {
|
||||
'src/filters/ColorPack.js',
|
||||
'src/filters/ConvolvePack.js',
|
||||
'src/filters/Enhance.js',
|
||||
'src/filters/Flip.js',
|
||||
'src/filters/Levels.js',
|
||||
'src/filters/Mirror.js',
|
||||
'src/filters/Noise.js',
|
||||
'src/filters/Pixelate.js',
|
||||
'src/filters/Polar.js',
|
||||
|
||||
@@ -1,101 +0,0 @@
|
||||
(function () {
|
||||
|
||||
/**
|
||||
* FlipX Filter. Flips the image horizontally so that the
|
||||
* left-most pixels become the right-most pixels and vice-versa.
|
||||
* Performs w*h pixel reads, 0 computations, and w*h pixel writes.
|
||||
* @function
|
||||
* @author ippo615
|
||||
* @memberof Kinetic.Filters
|
||||
* @param {ImageData} src, the source image data (what will be transformed)
|
||||
* @param {ImageData} dst, the destination image data (where it will be saved)
|
||||
* @param {Object} opt, There are no options for this filter
|
||||
*/
|
||||
|
||||
var FlipX = function (src, dst, opt) {
|
||||
var srcPixels = src.data,
|
||||
dstPixels = dst.data,
|
||||
xSize = src.width,
|
||||
xEnd = Math.ceil(0.5*xSize),
|
||||
ySize = src.height,
|
||||
i, m, x, y, r,g,b,a;
|
||||
for (x = 0; x < xEnd; x += 1) {
|
||||
for (y = 0; y < ySize; y += 1) {
|
||||
i = (y * xSize + x) * 4; // original
|
||||
m = (y * xSize + (xSize-1) - x) * 4; // flipped
|
||||
// Instead of copying each row from the source to the destiation
|
||||
// swap rows - this let's us achive a full flip in a single buffer
|
||||
r = srcPixels[m + 0];
|
||||
g = srcPixels[m + 1];
|
||||
b = srcPixels[m + 2];
|
||||
a = srcPixels[m + 3];
|
||||
dstPixels[m + 0] = srcPixels[i + 0];
|
||||
dstPixels[m + 1] = srcPixels[i + 1];
|
||||
dstPixels[m + 2] = srcPixels[i + 2];
|
||||
dstPixels[m + 3] = srcPixels[i + 3];
|
||||
dstPixels[i + 0] = r;
|
||||
dstPixels[i + 1] = g;
|
||||
dstPixels[i + 2] = b;
|
||||
dstPixels[i + 3] = a;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* FlipY Filter. Flips the image vertically so that the top-most
|
||||
* pixels become the bottom-most pixels and vice-versa.
|
||||
* Performs w*h pixel reads, 0 computations, and w*h pixel writes.
|
||||
* @function
|
||||
* @author ippo615
|
||||
* @memberof Kinetic.Filters
|
||||
* @param {ImageData} src, the source image data (what will be transformed)
|
||||
* @param {ImageData} dst, the destination image data (where it will be saved)
|
||||
* @param {Object} opt, There are no options for this filter
|
||||
*/
|
||||
|
||||
var FlipY = function (src, dst, opt) {
|
||||
var srcPixels = src.data,
|
||||
dstPixels = dst.data,
|
||||
xSize = src.width,
|
||||
ySize = src.height,
|
||||
yEnd = Math.ceil(0.5*ySize),
|
||||
i, m, x, y, r,g,b,a;
|
||||
for (x = 0; x < xSize; x += 1) {
|
||||
for (y = 0; y < yEnd; y += 1) {
|
||||
i = (y * xSize + x) * 4; // original
|
||||
m = ((ySize-1 - y) * xSize + x) * 4; // flipped
|
||||
// Instead of copying each row from the source to the destiation
|
||||
// swap rows - this let's us achive a full flip in a single buffer
|
||||
r = srcPixels[m + 0];
|
||||
g = srcPixels[m + 1];
|
||||
b = srcPixels[m + 2];
|
||||
a = srcPixels[m + 3];
|
||||
dstPixels[m + 0] = srcPixels[i + 0];
|
||||
dstPixels[m + 1] = srcPixels[i + 1];
|
||||
dstPixels[m + 2] = srcPixels[i + 2];
|
||||
dstPixels[m + 3] = srcPixels[i + 3];
|
||||
dstPixels[i + 0] = r;
|
||||
dstPixels[i + 1] = g;
|
||||
dstPixels[i + 2] = b;
|
||||
dstPixels[i + 3] = a;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Kinetic.Filters.FlipX = function(src,dst,opt){
|
||||
if( this === Kinetic.Filters ){
|
||||
FlipX(src, dst||src, opt );
|
||||
}else{
|
||||
FlipX.call(this, src, dst||src, opt);
|
||||
}
|
||||
};
|
||||
|
||||
Kinetic.Filters.FlipY = function(src,dst,opt){
|
||||
if( this === Kinetic.Filters ){
|
||||
FlipY(src, dst||src, opt );
|
||||
}else{
|
||||
FlipY.call(this, src, dst||src, opt);
|
||||
}
|
||||
};
|
||||
|
||||
})();
|
||||
@@ -1,92 +0,0 @@
|
||||
(function () {
|
||||
|
||||
/**
|
||||
* MirrorX Filter. Copies and flips the left half of the image
|
||||
* to the right side of the image
|
||||
* Performs w*h pixel reads and w*h pixel writes.
|
||||
* @function
|
||||
* @author ippo615
|
||||
* @memberof Kinetic.Filters
|
||||
* @param {ImageData} src, the source image data (what will be transformed)
|
||||
* @param {ImageData} dst, the destination image data (where it will be saved)
|
||||
* @param {Object} opt, There are no options for this filter
|
||||
*/
|
||||
|
||||
var MirrorX = function (src, dst, opt) {
|
||||
var srcPixels = src.data,
|
||||
dstPixels = dst.data,
|
||||
xSize = src.width,
|
||||
ySize = src.height,
|
||||
xMid = Math.ceil(xSize / 2),
|
||||
i, m, x, y;
|
||||
for (x = 0; x <= xMid; x += 1) {
|
||||
for (y = 0; y < ySize; y += 1) {
|
||||
// copy the original
|
||||
i = (y * xSize + x) * 4;
|
||||
dstPixels[i + 0] = srcPixels[i + 0];
|
||||
dstPixels[i + 1] = srcPixels[i + 1];
|
||||
dstPixels[i + 2] = srcPixels[i + 2];
|
||||
dstPixels[i + 3] = srcPixels[i + 3];
|
||||
// copy the mirrored
|
||||
m = (y * xSize + xSize - x) * 4;
|
||||
dstPixels[m + 0] = srcPixels[i + 0];
|
||||
dstPixels[m + 1] = srcPixels[i + 1];
|
||||
dstPixels[m + 2] = srcPixels[i + 2];
|
||||
dstPixels[m + 3] = srcPixels[i + 3];
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* MirrorY Filter. Copies and flips the top half of the image
|
||||
* to the bottom of the image
|
||||
* Performs w*h pixel reads and w*h pixel writes.
|
||||
* @function
|
||||
* @author ippo615
|
||||
* @memberof Kinetic.Filters
|
||||
* @param {ImageData} src, the source image data (what will be transformed)
|
||||
* @param {ImageData} dst, the destination image data (where it will be saved)
|
||||
* @param {Object} opt, There are no options for this filter
|
||||
*/
|
||||
var MirrorY = function (src, dst, opt) {
|
||||
var srcPixels = src.data,
|
||||
dstPixels = dst.data,
|
||||
xSize = src.width,
|
||||
ySize = src.height,
|
||||
yMid = Math.ceil(ySize / 2),
|
||||
i, m, x, y;
|
||||
for (x = 0; x < xSize; x += 1) {
|
||||
for (y = 0; y <= yMid; y += 1) {
|
||||
// copy the original
|
||||
i = (y * xSize + x) * 4;
|
||||
dstPixels[i + 0] = srcPixels[i + 0];
|
||||
dstPixels[i + 1] = srcPixels[i + 1];
|
||||
dstPixels[i + 2] = srcPixels[i + 2];
|
||||
dstPixels[i + 3] = srcPixels[i + 3];
|
||||
// copy the mirrored
|
||||
m = ( (ySize-y) * xSize + x) * 4;
|
||||
dstPixels[m + 0] = srcPixels[i + 0];
|
||||
dstPixels[m + 1] = srcPixels[i + 1];
|
||||
dstPixels[m + 2] = srcPixels[i + 2];
|
||||
dstPixels[m + 3] = srcPixels[i + 3];
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Kinetic.Filters.MirrorX = function(src,dst,opt){
|
||||
if( this === Kinetic.Filters ){
|
||||
MirrorX(src, dst||src, opt );
|
||||
}else{
|
||||
MirrorX.call(this, src, dst||src, opt);
|
||||
}
|
||||
};
|
||||
|
||||
Kinetic.Filters.MirrorY = function(src,dst,opt){
|
||||
if( this === Kinetic.Filters ){
|
||||
MirrorY(src, dst||src, opt );
|
||||
}else{
|
||||
MirrorY.call(this, src, dst||src, opt);
|
||||
}
|
||||
};
|
||||
|
||||
})();
|
||||
@@ -94,9 +94,8 @@
|
||||
<script src="unit/filters/Noise-test.js"></script>
|
||||
<script src="unit/filters/Threshold-test.js"></script>
|
||||
<script src="unit/filters/Levels-test.js"></script>
|
||||
<!--<script src="unit/filters/Flip-test.js"></script>
|
||||
<script src="unit/filters/Mirror-test.js"></script>
|
||||
<script src="unit/filters/Sepia-test.js"></script>
|
||||
|
||||
<!--<script src="unit/filters/Sepia-test.js"></script>
|
||||
-->
|
||||
|
||||
<!--=============== functional tests ================-->
|
||||
|
||||
@@ -1,269 +0,0 @@
|
||||
suite('Flip', function () {
|
||||
// ======================================================
|
||||
test('both', function (done) {
|
||||
var stage = addStage();
|
||||
|
||||
var shapesLayer = new Kinetic.Layer();
|
||||
|
||||
// The important line!
|
||||
shapesLayer.on('draw', function () {
|
||||
var imageData = this.getContext().getImageData(0,0,this.getCanvas().width,this.getCanvas().height);
|
||||
var scratchData = this.getContext().createImageData(imageData); // only size copied
|
||||
Kinetic.Filters.FlipX(imageData,scratchData,{});
|
||||
Kinetic.Filters.FlipY(scratchData,imageData,{});
|
||||
this.getContext().putImageData(imageData,0,0);
|
||||
|
||||
// repeat for hit canvas
|
||||
var hit = this.getHitCanvas();
|
||||
//console.info(hit);
|
||||
imageData = hit.getContext().getImageData(0,0,hit.getWidth(),hit.getHeight());
|
||||
//imageData = hit.context.getImageData(0,0,hit.getWidth(),hit.getHeight());
|
||||
Kinetic.Filters.FlipX(imageData,scratchData,{});
|
||||
Kinetic.Filters.FlipY(scratchData,imageData,{});
|
||||
hit.getContext().putImageData(imageData,0,0);
|
||||
|
||||
imageData = null;
|
||||
scratchData = null;
|
||||
});
|
||||
|
||||
var triangle = new Kinetic.RegularPolygon({
|
||||
x: stage.getWidth() / 4,
|
||||
y: stage.getHeight() / 2,
|
||||
sides: 3,
|
||||
radius: 80,
|
||||
fillRadialGradientStartPoint: 0,
|
||||
fillRadialGradientStartRadius: 0,
|
||||
fillRadialGradientEndPoint: 0,
|
||||
fillRadialGradientEndRadius: 70,
|
||||
fillRadialGradientColorStops: [0, '#881111', 0.5, '#888811', 1, '#000088'],
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
draggable: true
|
||||
});
|
||||
|
||||
var circle = new Kinetic.Circle({
|
||||
x: 3 * stage.getWidth() / 4,
|
||||
y: stage.getHeight() / 2,
|
||||
radius: 70,
|
||||
fill: '#880000',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
draggable: true,
|
||||
id: 'myCircle'
|
||||
});
|
||||
|
||||
for( var i=0; i<10; i+=1 ){
|
||||
for( var j=0; j<10; j+=1 ){
|
||||
var rect = new Kinetic.Rect({
|
||||
x: i/10*stage.getWidth(),
|
||||
y: j/10*stage.getHeight(),
|
||||
width: stage.getWidth()/10,
|
||||
height: stage.getHeight()/10,
|
||||
fill: (i+j)%2===0?'#FF0000':'#FFFF00',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
draggable: true
|
||||
});
|
||||
shapesLayer.add(rect);
|
||||
}
|
||||
}
|
||||
|
||||
shapesLayer.add(circle);
|
||||
shapesLayer.add(triangle);
|
||||
|
||||
stage.add(shapesLayer);
|
||||
|
||||
done();
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('horizontal', function (done) {
|
||||
var stage = addStage();
|
||||
|
||||
var shapesLayer = new Kinetic.Layer();
|
||||
|
||||
// The important line!
|
||||
shapesLayer.on('draw', function () {
|
||||
var imageData = this.getContext().getImageData(0,0,this.getCanvas().width,this.getCanvas().height);
|
||||
var scratchData = this.getContext().createImageData(imageData); // only size copied
|
||||
Kinetic.Filters.FlipX(imageData,scratchData,{});
|
||||
this.getContext().putImageData(scratchData,0,0);
|
||||
|
||||
// repeat for hit canvas
|
||||
var hit = this.getHitCanvas();
|
||||
imageData = hit.getContext().getImageData(0,0,hit.getWidth(),hit.getHeight());
|
||||
//imageData = hit.context.getImageData(0,0,hit.getWidth(),hit.getHeight());
|
||||
Kinetic.Filters.FlipX(imageData,scratchData,{});
|
||||
hit.getContext().putImageData(scratchData,0,0);
|
||||
|
||||
imageData = null;
|
||||
scratchData = null;
|
||||
});
|
||||
|
||||
var triangle = new Kinetic.RegularPolygon({
|
||||
x: stage.getWidth() / 4,
|
||||
y: stage.getHeight() / 2,
|
||||
sides: 3,
|
||||
radius: 80,
|
||||
fillRadialGradientStartPoint: 0,
|
||||
fillRadialGradientStartRadius: 0,
|
||||
fillRadialGradientEndPoint: 0,
|
||||
fillRadialGradientEndRadius: 70,
|
||||
fillRadialGradientColorStops: [0, '#881111', 0.5, '#888811', 1, '#000088'],
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
draggable: true
|
||||
});
|
||||
|
||||
var circle = new Kinetic.Circle({
|
||||
x: 3 * stage.getWidth() / 4,
|
||||
y: stage.getHeight() / 2,
|
||||
radius: 70,
|
||||
fill: '#880000',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
draggable: true,
|
||||
id: 'myCircle'
|
||||
});
|
||||
|
||||
for( var i=0; i<10; i+=1 ){
|
||||
for( var j=0; j<10; j+=1 ){
|
||||
var rect = new Kinetic.Rect({
|
||||
x: i/10*stage.getWidth(),
|
||||
y: j/10*stage.getHeight(),
|
||||
width: stage.getWidth()/10,
|
||||
height: stage.getHeight()/10,
|
||||
fill: (i+j)%2===0?'#FF0000':'#FFFF00',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
draggable: true
|
||||
});
|
||||
shapesLayer.add(rect);
|
||||
}
|
||||
}
|
||||
|
||||
shapesLayer.add(circle);
|
||||
shapesLayer.add(triangle);
|
||||
|
||||
stage.add(shapesLayer);
|
||||
|
||||
done();
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('vertical', function (done) {
|
||||
var stage = addStage();
|
||||
|
||||
var shapesLayer = new Kinetic.Layer();
|
||||
|
||||
// The important line!
|
||||
shapesLayer.on('draw', function () {
|
||||
var imageData = this.getContext().getImageData(0,0,this.getCanvas().width,this.getCanvas().height);
|
||||
var scratchData = this.getContext().createImageData(imageData); // only size copied
|
||||
Kinetic.Filters.FlipY(imageData,scratchData,{});
|
||||
this.getContext().putImageData(scratchData,0,0);
|
||||
|
||||
// repeat for hit canvas
|
||||
var hit = this.getHitCanvas();
|
||||
imageData = hit.getContext().getImageData(0,0,hit.getWidth(),hit.getHeight());
|
||||
//imageData = hit.context.getImageData(0,0,hit.getWidth(),hit.getHeight());
|
||||
Kinetic.Filters.FlipY(imageData,scratchData,{});
|
||||
hit.getContext().putImageData(scratchData,0,0);
|
||||
|
||||
imageData = null;
|
||||
scratchData = null;
|
||||
});
|
||||
|
||||
var triangle = new Kinetic.RegularPolygon({
|
||||
x: stage.getWidth() / 4,
|
||||
y: stage.getHeight() / 2,
|
||||
sides: 3,
|
||||
radius: 80,
|
||||
fillRadialGradientStartPoint: 0,
|
||||
fillRadialGradientStartRadius: 0,
|
||||
fillRadialGradientEndPoint: 0,
|
||||
fillRadialGradientEndRadius: 70,
|
||||
fillRadialGradientColorStops: [0, '#881111', 0.5, '#888811', 1, '#000088'],
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
draggable: true
|
||||
});
|
||||
|
||||
var circle = new Kinetic.Circle({
|
||||
x: 3 * stage.getWidth() / 4,
|
||||
y: stage.getHeight() / 2,
|
||||
radius: 70,
|
||||
fill: '#880000',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
draggable: true,
|
||||
id: 'myCircle'
|
||||
});
|
||||
|
||||
for( var i=0; i<10; i+=1 ){
|
||||
for( var j=0; j<10; j+=1 ){
|
||||
var rect = new Kinetic.Rect({
|
||||
x: i/10*stage.getWidth(),
|
||||
y: j/10*stage.getHeight(),
|
||||
width: stage.getWidth()/10,
|
||||
height: stage.getHeight()/10,
|
||||
fill: (i+j)%2===0?'#FF0000':'#FFFF00',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
draggable: true
|
||||
});
|
||||
shapesLayer.add(rect);
|
||||
}
|
||||
}
|
||||
|
||||
shapesLayer.add(circle);
|
||||
shapesLayer.add(triangle);
|
||||
|
||||
stage.add(shapesLayer);
|
||||
|
||||
done();
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('on image', function(done) {
|
||||
var stage = addStage();
|
||||
|
||||
var imageObj = new Image();
|
||||
imageObj.onload = function() {
|
||||
|
||||
var layer = new Kinetic.Layer();
|
||||
var xFlip = new Kinetic.Image({
|
||||
x: 160,
|
||||
y: 10,
|
||||
image: imageObj,
|
||||
draggable: true,
|
||||
filter: Kinetic.Filters.FlipX
|
||||
});
|
||||
var yFlip = new Kinetic.Image({
|
||||
x: 320,
|
||||
y: 10,
|
||||
image: imageObj,
|
||||
draggable: true,
|
||||
filter: Kinetic.Filters.FlipY
|
||||
});
|
||||
var noFlip = new Kinetic.Image({
|
||||
x: 0,
|
||||
y: 10,
|
||||
image: imageObj,
|
||||
draggable: true
|
||||
});
|
||||
|
||||
layer.add(noFlip);
|
||||
layer.add(xFlip);
|
||||
layer.add(yFlip);
|
||||
stage.add(layer);
|
||||
|
||||
layer.draw();
|
||||
|
||||
done();
|
||||
};
|
||||
imageObj.src = 'assets/lion.png';
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
@@ -1,238 +0,0 @@
|
||||
suite('Mirror', function () {
|
||||
// ======================================================
|
||||
test('both', function (done) {
|
||||
var stage = addStage();
|
||||
|
||||
var shapesLayer = new Kinetic.Layer();
|
||||
|
||||
// The important line!
|
||||
shapesLayer.on('draw', function () {
|
||||
var imageData = this.getContext().getImageData(0,0,this.getCanvas().width,this.getCanvas().height);
|
||||
var scratchData = this.getContext().createImageData(imageData); // only size copied
|
||||
Kinetic.Filters.MirrorX(imageData,scratchData,{});
|
||||
Kinetic.Filters.MirrorY(scratchData,imageData,{});
|
||||
this.getContext().putImageData(imageData,0,0);
|
||||
//this.getContext().putImageData(scratchData,0,0);
|
||||
});
|
||||
|
||||
var triangle = new Kinetic.RegularPolygon({
|
||||
x: stage.getWidth() / 4,
|
||||
y: stage.getHeight() / 2,
|
||||
sides: 3,
|
||||
radius: 80,
|
||||
fillRadialGradientStartPoint: 0,
|
||||
fillRadialGradientStartRadius: 0,
|
||||
fillRadialGradientEndPoint: 0,
|
||||
fillRadialGradientEndRadius: 70,
|
||||
fillRadialGradientColorStops: [0, '#881111', 0.5, '#888811', 1, '#000088'],
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
draggable: true
|
||||
});
|
||||
|
||||
var circle = new Kinetic.Circle({
|
||||
x: 3 * stage.getWidth() / 4,
|
||||
y: stage.getHeight() / 2,
|
||||
radius: 70,
|
||||
fill: '#880000',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
draggable: true,
|
||||
id: 'myCircle'
|
||||
});
|
||||
|
||||
for( var i=0; i<10; i+=1 ){
|
||||
for( var j=0; j<10; j+=1 ){
|
||||
var rect = new Kinetic.Rect({
|
||||
x: i/10*stage.getWidth(),
|
||||
y: j/10*stage.getHeight(),
|
||||
width: stage.getWidth()/10,
|
||||
height: stage.getHeight()/10,
|
||||
fill: (i+j)%2===0?'#FF0000':'#FFFF00',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
draggable: true
|
||||
});
|
||||
shapesLayer.add(rect);
|
||||
}
|
||||
}
|
||||
|
||||
shapesLayer.add(circle);
|
||||
shapesLayer.add(triangle);
|
||||
|
||||
stage.add(shapesLayer);
|
||||
|
||||
done();
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('horizontal', function (done) {
|
||||
var stage = addStage();
|
||||
|
||||
var shapesLayer = new Kinetic.Layer();
|
||||
|
||||
// The important line!
|
||||
shapesLayer.on('draw', function () {
|
||||
var imageData = this.getContext().getImageData(0,0,this.getCanvas().width,this.getCanvas().height);
|
||||
var scratchData = this.getContext().createImageData(imageData); // only size copied
|
||||
Kinetic.Filters.MirrorX(imageData,scratchData,{});
|
||||
this.getContext().putImageData(scratchData,0,0);
|
||||
});
|
||||
|
||||
var triangle = new Kinetic.RegularPolygon({
|
||||
x: stage.getWidth() / 4,
|
||||
y: stage.getHeight() / 2,
|
||||
sides: 3,
|
||||
radius: 80,
|
||||
fillRadialGradientStartPoint: 0,
|
||||
fillRadialGradientStartRadius: 0,
|
||||
fillRadialGradientEndPoint: 0,
|
||||
fillRadialGradientEndRadius: 70,
|
||||
fillRadialGradientColorStops: [0, '#881111', 0.5, '#888811', 1, '#000088'],
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
draggable: true
|
||||
});
|
||||
|
||||
var circle = new Kinetic.Circle({
|
||||
x: 3 * stage.getWidth() / 4,
|
||||
y: stage.getHeight() / 2,
|
||||
radius: 70,
|
||||
fill: '#880000',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
draggable: true,
|
||||
id: 'myCircle'
|
||||
});
|
||||
|
||||
for( var i=0; i<10; i+=1 ){
|
||||
for( var j=0; j<10; j+=1 ){
|
||||
var rect = new Kinetic.Rect({
|
||||
x: i/10*stage.getWidth(),
|
||||
y: j/10*stage.getHeight(),
|
||||
width: stage.getWidth()/10,
|
||||
height: stage.getHeight()/10,
|
||||
fill: (i+j)%2===0?'#FF0000':'#FFFF00',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
draggable: true
|
||||
});
|
||||
shapesLayer.add(rect);
|
||||
}
|
||||
}
|
||||
|
||||
shapesLayer.add(circle);
|
||||
shapesLayer.add(triangle);
|
||||
|
||||
stage.add(shapesLayer);
|
||||
|
||||
done();
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('vertical', function (done) {
|
||||
var stage = addStage();
|
||||
|
||||
var shapesLayer = new Kinetic.Layer();
|
||||
|
||||
// The important line!
|
||||
shapesLayer.on('draw', function () {
|
||||
var imageData = this.getContext().getImageData(0,0,this.getCanvas().width,this.getCanvas().height);
|
||||
var scratchData = this.getContext().createImageData(imageData); // only size copied
|
||||
Kinetic.Filters.MirrorY(imageData,scratchData,{});
|
||||
this.getContext().putImageData(scratchData,0,0);
|
||||
});
|
||||
|
||||
var triangle = new Kinetic.RegularPolygon({
|
||||
x: stage.getWidth() / 4,
|
||||
y: stage.getHeight() / 2,
|
||||
sides: 3,
|
||||
radius: 80,
|
||||
fillRadialGradientStartPoint: 0,
|
||||
fillRadialGradientStartRadius: 0,
|
||||
fillRadialGradientEndPoint: 0,
|
||||
fillRadialGradientEndRadius: 70,
|
||||
fillRadialGradientColorStops: [0, '#881111', 0.5, '#888811', 1, '#000088'],
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
draggable: true
|
||||
});
|
||||
|
||||
var circle = new Kinetic.Circle({
|
||||
x: 3 * stage.getWidth() / 4,
|
||||
y: stage.getHeight() / 2,
|
||||
radius: 70,
|
||||
fill: '#880000',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
draggable: true,
|
||||
id: 'myCircle'
|
||||
});
|
||||
|
||||
for( var i=0; i<10; i+=1 ){
|
||||
for( var j=0; j<10; j+=1 ){
|
||||
var rect = new Kinetic.Rect({
|
||||
x: i/10*stage.getWidth(),
|
||||
y: j/10*stage.getHeight(),
|
||||
width: stage.getWidth()/10,
|
||||
height: stage.getHeight()/10,
|
||||
fill: (i+j)%2===0?'#FF0000':'#FFFF00',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
draggable: true
|
||||
});
|
||||
shapesLayer.add(rect);
|
||||
}
|
||||
}
|
||||
|
||||
shapesLayer.add(circle);
|
||||
shapesLayer.add(triangle);
|
||||
|
||||
stage.add(shapesLayer);
|
||||
|
||||
done();
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('on image', function(done) {
|
||||
var stage = addStage();
|
||||
|
||||
var imageObj = new Image();
|
||||
imageObj.onload = function() {
|
||||
|
||||
var layer = new Kinetic.Layer();
|
||||
var xMirror = new Kinetic.Image({
|
||||
x: 160,
|
||||
y: 10,
|
||||
image: imageObj,
|
||||
draggable: true,
|
||||
filter: Kinetic.Filters.MirrorX
|
||||
});
|
||||
var yMirror = new Kinetic.Image({
|
||||
x: 320,
|
||||
y: 10,
|
||||
image: imageObj,
|
||||
draggable: true,
|
||||
filter: Kinetic.Filters.MirrorY
|
||||
});
|
||||
var noMirror = new Kinetic.Image({
|
||||
x: 0,
|
||||
y: 10,
|
||||
image: imageObj,
|
||||
draggable: true
|
||||
});
|
||||
|
||||
layer.add(noMirror);
|
||||
layer.add(xMirror);
|
||||
layer.add(yMirror);
|
||||
stage.add(layer);
|
||||
|
||||
layer.draw();
|
||||
|
||||
done();
|
||||
};
|
||||
imageObj.src = 'assets/lion.png';
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
Reference in New Issue
Block a user