mirror of
https://github.com/konvajs/konva.git
synced 2025-12-19 19:56:59 +08:00
refactor tests
This commit is contained in:
Anton Lavrenov
416
test/manual/Manual-test.ts
Normal file
416
test/manual/Manual-test.ts
Normal file
@@ -0,0 +1,416 @@
|
||||
import { assert } from 'chai';
|
||||
|
||||
import { addStage, Konva, loadImage } from '../unit/utis';
|
||||
|
||||
describe('Manual', function () {
|
||||
// ======================================================
|
||||
it('oscillation animation', function () {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
|
||||
var hexagon = new Konva.RegularPolygon({
|
||||
x: stage.width() / 2,
|
||||
y: stage.height() / 2,
|
||||
sides: 6,
|
||||
radius: 70,
|
||||
fill: 'red',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
});
|
||||
|
||||
// var hexagon = new Konva.Rect({
|
||||
// x: stage.width()/2,
|
||||
// y: stage.height()/2,
|
||||
// width: 100,
|
||||
// height: 50,
|
||||
// fill: 'red',
|
||||
// stroke: 'black',
|
||||
// strokeWidth: 4
|
||||
// });
|
||||
|
||||
layer.add(hexagon);
|
||||
stage.add(layer);
|
||||
|
||||
var amplitude = 150;
|
||||
var period = 2000;
|
||||
// in ms
|
||||
var centerX = stage.width() / 2;
|
||||
|
||||
var anim = new Konva.Animation(function (frame) {
|
||||
hexagon.x(
|
||||
amplitude * Math.sin((new Date().getTime() * 2 * Math.PI) / period) +
|
||||
centerX
|
||||
);
|
||||
}, layer);
|
||||
|
||||
anim.start();
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
it('rotation animation', function () {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
var rect;
|
||||
|
||||
for (var n = 0; n < 100; n++) {
|
||||
rect = new Konva.Rect({
|
||||
x: Math.random() * 400,
|
||||
y: Math.random() * 400,
|
||||
width: 100,
|
||||
height: 50,
|
||||
fill: 'red',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
});
|
||||
|
||||
layer.add(rect);
|
||||
}
|
||||
|
||||
stage.add(layer);
|
||||
|
||||
var velocity = 360; // 1 rev per second
|
||||
|
||||
var anim = new Konva.Animation(function (frame) {
|
||||
layer
|
||||
.find('Rect')
|
||||
.forEach((rect) => rect.rotate((velocity * frame.timeDiff) / 1000));
|
||||
}, layer);
|
||||
|
||||
anim.start();
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
it('tween node', function () {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
var rect = new Konva.Rect({
|
||||
x: 100,
|
||||
y: 100,
|
||||
width: 100,
|
||||
height: 50,
|
||||
fill: 'green',
|
||||
stroke: 'black',
|
||||
strokeWidth: 2,
|
||||
opacity: 0.2,
|
||||
});
|
||||
|
||||
layer.add(rect);
|
||||
stage.add(layer);
|
||||
|
||||
var tween = new Konva.Tween({
|
||||
node: rect,
|
||||
duration: 1,
|
||||
x: 400,
|
||||
y: 30,
|
||||
rotation: 90,
|
||||
opacity: 1,
|
||||
strokeWidth: 6,
|
||||
scaleX: 1.5,
|
||||
});
|
||||
|
||||
tween.play();
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
it('tween spline', function () {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
|
||||
var spline = new Konva.Line({
|
||||
points: [73, 160, 340, 23, 500, 109, 300, 109],
|
||||
stroke: 'blue',
|
||||
strokeWidth: 10,
|
||||
lineCap: 'round',
|
||||
lineJoin: 'round',
|
||||
draggable: true,
|
||||
tension: 1,
|
||||
});
|
||||
|
||||
layer.add(spline);
|
||||
stage.add(layer);
|
||||
|
||||
var tween = new Konva.Tween({
|
||||
node: spline,
|
||||
duration: 1,
|
||||
//x: 100,
|
||||
|
||||
points: [200, 160, 200, 23, 500, 109, 100, 10],
|
||||
easing: Konva.Easings.BackEaseOut,
|
||||
yoyo: false,
|
||||
});
|
||||
|
||||
// stage.getContent().addEventListener('mouseover', function() {
|
||||
// tween.play();
|
||||
// });
|
||||
|
||||
// stage.getContent().addEventListener('mouseout', function() {
|
||||
// tween.reverse();
|
||||
// });
|
||||
|
||||
tween.play();
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
it('blur and tween spline', function () {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
|
||||
var spline = new Konva.Line({
|
||||
points: [73, 160, 340, 23, 500, 109, 300, 109],
|
||||
stroke: 'blue',
|
||||
strokeWidth: 10,
|
||||
lineCap: 'round',
|
||||
lineJoin: 'round',
|
||||
draggable: true,
|
||||
tension: 1,
|
||||
});
|
||||
|
||||
layer.add(spline);
|
||||
stage.add(layer);
|
||||
|
||||
spline.cache({
|
||||
width: stage.width(),
|
||||
height: stage.height(),
|
||||
});
|
||||
|
||||
spline.filters([Konva.Filters.Blur]).blurRadius(40);
|
||||
layer.draw();
|
||||
|
||||
layer.on('beforeDraw', function () {
|
||||
spline.cache({
|
||||
width: stage.width(),
|
||||
height: stage.height(),
|
||||
});
|
||||
});
|
||||
|
||||
var tween = new Konva.Tween({
|
||||
node: spline,
|
||||
duration: 2,
|
||||
//x: 100,
|
||||
|
||||
points: [200, 160, 200, 23, 500, 109, 100, 10],
|
||||
blurRadius: 0,
|
||||
easing: Konva.Easings.BackEaseOut,
|
||||
yoyo: false,
|
||||
});
|
||||
|
||||
// stage.getContent().addEventListener('mouseover', function() {
|
||||
// tween.play();
|
||||
// });
|
||||
|
||||
// stage.getContent().addEventListener('mouseout', function() {
|
||||
// tween.reverse();
|
||||
// });
|
||||
|
||||
tween.play();
|
||||
});
|
||||
|
||||
it('Make sure that all texts are inside rectangles.', function () {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
|
||||
var text = new Konva.Text({
|
||||
fontSize: 50,
|
||||
y: 5,
|
||||
x: 25,
|
||||
fill: 'black',
|
||||
text: 'text',
|
||||
});
|
||||
var params = text.getSelfRect();
|
||||
var rect = new Konva.Rect({
|
||||
x: text.x() + params.x,
|
||||
y: text.y() + params.y,
|
||||
width: params.width,
|
||||
height: params.height,
|
||||
stroke: 'black',
|
||||
});
|
||||
layer.add(rect, text);
|
||||
|
||||
text = new Konva.Text({
|
||||
fontSize: 40,
|
||||
y: 40,
|
||||
x: 150,
|
||||
fill: 'black',
|
||||
text: 'Hello\nWorld! How Are you?',
|
||||
align: 'center',
|
||||
});
|
||||
params = text.getSelfRect();
|
||||
rect = new Konva.Rect({
|
||||
x: text.x() + params.x,
|
||||
y: text.y() + params.y,
|
||||
width: params.width,
|
||||
height: params.height,
|
||||
stroke: 'black',
|
||||
});
|
||||
layer.add(rect, text);
|
||||
|
||||
stage.add(layer);
|
||||
});
|
||||
|
||||
it('change hit graph ratio', function () {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
var circle = new Konva.Circle({
|
||||
x: stage.width() / 2,
|
||||
y: stage.height() / 2,
|
||||
radius: 50,
|
||||
stroke: 'black',
|
||||
fill: 'red',
|
||||
strokeWidth: 5,
|
||||
draggable: true,
|
||||
});
|
||||
|
||||
var text = new Konva.Text({
|
||||
text: 'click on circle to decrease hit grpah retion',
|
||||
});
|
||||
|
||||
layer.add(circle, text);
|
||||
stage.add(layer);
|
||||
showHit(layer);
|
||||
|
||||
circle.on('mouseenter', function () {
|
||||
document.body.style.cursor = 'pointer';
|
||||
});
|
||||
|
||||
circle.on('mouseleave', function () {
|
||||
document.body.style.cursor = 'default';
|
||||
});
|
||||
|
||||
circle.on('click', function () {
|
||||
var ratio = layer.getHitCanvas().getPixelRatio() * 0.8;
|
||||
console.log('new ratio', ratio);
|
||||
layer.getHitCanvas().setPixelRatio(ratio);
|
||||
layer.draw();
|
||||
});
|
||||
});
|
||||
|
||||
it('tween color', function () {
|
||||
var stage = addStage();
|
||||
|
||||
var layer = new Konva.Layer();
|
||||
|
||||
var circle = new Konva.Circle({
|
||||
x: 100,
|
||||
y: stage.height() / 2,
|
||||
radius: 70,
|
||||
fill: 'red',
|
||||
stroke: 'blue',
|
||||
strokeWidth: 4,
|
||||
shadowOffx: 10,
|
||||
shadowOffsetY: 10,
|
||||
shadowColor: 'black',
|
||||
});
|
||||
|
||||
var text = new Konva.Text({
|
||||
text: 'click on circle to start tween',
|
||||
});
|
||||
|
||||
layer.add(circle, text);
|
||||
stage.add(layer);
|
||||
|
||||
circle.on('click', function () {
|
||||
var tween = new Konva.Tween({
|
||||
node: circle,
|
||||
duration: 1,
|
||||
fill: Konva.Util.getRandomColor(),
|
||||
stroke: Konva.Util.getRandomColor(),
|
||||
shadowColor: Konva.Util.getRandomColor(),
|
||||
});
|
||||
tween.play();
|
||||
});
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
it('create image hit region with pixelRatio, look at hit, test hit with mouseover', function (done) {
|
||||
var imageObj = new Image();
|
||||
|
||||
Konva.pixelRatio = 2;
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
|
||||
imageObj.onload = function () {
|
||||
var lion = new Konva.Image({
|
||||
x: 200,
|
||||
y: 40,
|
||||
image: imageObj,
|
||||
draggable: true,
|
||||
});
|
||||
|
||||
layer.add(lion);
|
||||
|
||||
stage.add(layer);
|
||||
|
||||
lion.cache();
|
||||
lion.drawHitFromCache();
|
||||
layer.draw();
|
||||
|
||||
lion.on('mouseenter', function () {
|
||||
document.body.style.cursor = 'pointer';
|
||||
});
|
||||
|
||||
lion.on('mouseleave', function () {
|
||||
document.body.style.cursor = 'default';
|
||||
});
|
||||
|
||||
Konva.pixelRatio = undefined;
|
||||
done();
|
||||
};
|
||||
imageObj.src = 'assets/lion.png';
|
||||
|
||||
showHit(layer);
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
it('image hit region with alpha threshold, mouseover circle', function (done) {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
stage.add(layer);
|
||||
|
||||
var group = new Konva.Group();
|
||||
|
||||
var circle = new Konva.Circle({
|
||||
x: 50,
|
||||
y: 50,
|
||||
fill: 'red',
|
||||
radius: 40,
|
||||
});
|
||||
var rect = new Konva.Rect({
|
||||
width: 100,
|
||||
height: 100,
|
||||
fill: 'green',
|
||||
opacity: 0.5,
|
||||
});
|
||||
group.add(rect, circle);
|
||||
|
||||
group.toImage({
|
||||
width: 100,
|
||||
height: 100,
|
||||
callback: function (img) {
|
||||
var image = new Konva.Image({
|
||||
image: img,
|
||||
});
|
||||
image.cache();
|
||||
image.drawHitFromCache(200);
|
||||
layer.add(image);
|
||||
layer.draw();
|
||||
var shape = layer.getIntersection({
|
||||
x: 5,
|
||||
y: 5,
|
||||
});
|
||||
|
||||
assert.equal(!!shape, false, 'shape should not be detected');
|
||||
|
||||
image.on('mouseenter', function () {
|
||||
document.body.style.cursor = 'pointer';
|
||||
});
|
||||
|
||||
image.on('mouseleave', function () {
|
||||
document.body.style.cursor = 'default';
|
||||
});
|
||||
done();
|
||||
},
|
||||
});
|
||||
|
||||
showHit(layer);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user