mirror of
https://github.com/konvajs/konva.git
synced 2025-04-05 20:48:28 +08:00
371 lines
9.8 KiB
JavaScript
371 lines
9.8 KiB
JavaScript
suite('Image', function() {
|
|
// ======================================================
|
|
test('add image', function(done) {
|
|
var imageObj = new Image();
|
|
imageObj.onload = function() {
|
|
var stage = addStage();
|
|
|
|
var layer = new Konva.Layer();
|
|
var darth = new Konva.Image({
|
|
x: 200,
|
|
y: 60,
|
|
image: imageObj,
|
|
width: 100,
|
|
height: 100,
|
|
offset: { x: 50, y: 30 },
|
|
crop: { x: 135, y: 7, width: 167, height: 134 },
|
|
draggable: true
|
|
});
|
|
|
|
layer.add(darth);
|
|
stage.add(layer);
|
|
|
|
darth.setHeight(200);
|
|
layer.draw();
|
|
|
|
darth.setHeight(100);
|
|
layer.draw();
|
|
|
|
assert.equal(darth.getX(), 200);
|
|
assert.equal(darth.getY(), 60);
|
|
assert.equal(darth.getWidth(), 100);
|
|
assert.equal(darth.getHeight(), 100);
|
|
assert.equal(darth.offset().x, 50);
|
|
assert.equal(darth.offset().y, 30);
|
|
assert.equal(Konva.Util._isElement(darth.getImage()), true);
|
|
|
|
var crop = null;
|
|
crop = darth.getCrop();
|
|
|
|
assert.equal(crop.x, 135);
|
|
assert.equal(crop.y, 7);
|
|
assert.equal(crop.width, 167);
|
|
assert.equal(crop.height, 134);
|
|
|
|
darth.setCrop({
|
|
x: 8,
|
|
y: 9,
|
|
width: 10,
|
|
height: 11
|
|
});
|
|
crop = darth.getCrop();
|
|
assert.equal(crop.x, 8);
|
|
assert.equal(crop.y, 9);
|
|
assert.equal(crop.width, 10);
|
|
assert.equal(crop.height, 11);
|
|
|
|
darth.setCropX(12);
|
|
crop = darth.getCrop();
|
|
assert.equal(crop.x, 12);
|
|
assert.equal(crop.y, 9);
|
|
assert.equal(crop.width, 10);
|
|
assert.equal(crop.height, 11);
|
|
|
|
darth.setCropY(13);
|
|
crop = darth.getCrop();
|
|
assert.equal(crop.x, 12);
|
|
assert.equal(crop.y, 13);
|
|
assert.equal(crop.width, 10);
|
|
assert.equal(crop.height, 11);
|
|
|
|
darth.setCropWidth(14);
|
|
crop = darth.getCrop();
|
|
assert.equal(crop.x, 12);
|
|
assert.equal(crop.y, 13);
|
|
assert.equal(crop.width, 14);
|
|
assert.equal(crop.height, 11);
|
|
|
|
darth.setCropHeight(15);
|
|
crop = darth.getCrop();
|
|
assert.equal(crop.x, 12);
|
|
assert.equal(crop.y, 13);
|
|
assert.equal(crop.width, 14);
|
|
assert.equal(crop.height, 15);
|
|
|
|
darth.setAttrs({
|
|
x: 200,
|
|
y: 60,
|
|
image: imageObj,
|
|
width: 100,
|
|
height: 100,
|
|
offsetX: 50,
|
|
offsetY: 30,
|
|
crop: { x: 135, y: 7, width: 167, height: 134 },
|
|
draggable: true
|
|
});
|
|
|
|
//document.body.appendChild(layer.bufferCanvas.element)
|
|
|
|
assert.equal(darth.getClassName(), 'Image');
|
|
|
|
var trace = layer.getContext().getTrace();
|
|
//console.log(trace);
|
|
|
|
assert.equal(
|
|
trace,
|
|
'clearRect(0,0,578,200);save();transform(1,0,0,1,150,30);drawImage([object HTMLImageElement],135,7,167,134,0,0,100,100);restore();clearRect(0,0,578,200);save();transform(1,0,0,1,150,30);drawImage([object HTMLImageElement],135,7,167,134,0,0,100,200);restore();clearRect(0,0,578,200);save();transform(1,0,0,1,150,30);drawImage([object HTMLImageElement],135,7,167,134,0,0,100,100);restore();'
|
|
);
|
|
|
|
done();
|
|
};
|
|
imageObj.src = 'assets/darth-vader.jpg';
|
|
});
|
|
|
|
// ======================================================
|
|
test('crop and scale image', function(done) {
|
|
var imageObj = new Image();
|
|
imageObj.onload = function() {
|
|
var stage = addStage();
|
|
var layer = new Konva.Layer();
|
|
darth = new Konva.Image({
|
|
x: 200,
|
|
y: 75,
|
|
image: imageObj,
|
|
width: 107,
|
|
height: 75,
|
|
crop: { x: 186, y: 211, width: 106, height: 74 },
|
|
draggable: true,
|
|
scale: { x: 0.5, y: 0.5 }
|
|
});
|
|
|
|
layer.add(darth);
|
|
stage.add(layer);
|
|
|
|
assert.equal(darth.getCrop().x, 186);
|
|
assert.equal(darth.getCrop().y, 211);
|
|
assert.equal(darth.getCrop().width, 106);
|
|
assert.equal(darth.getCrop().height, 74);
|
|
|
|
assert.equal(darth.getCropX(), 186);
|
|
assert.equal(darth.getCropY(), 211);
|
|
assert.equal(darth.getCropWidth(), 106);
|
|
assert.equal(darth.getCropHeight(), 74);
|
|
|
|
darth.setCrop({ x: 1, y: 2, width: 3, height: 4 });
|
|
|
|
assert.equal(darth.getCrop().x, 1);
|
|
assert.equal(darth.getCrop().y, 2);
|
|
assert.equal(darth.getCrop().width, 3);
|
|
assert.equal(darth.getCrop().height, 4);
|
|
|
|
assert.equal(darth.getCropX(), 1);
|
|
assert.equal(darth.getCropY(), 2);
|
|
assert.equal(darth.getCropWidth(), 3);
|
|
assert.equal(darth.getCropHeight(), 4);
|
|
|
|
darth.setCropX(5);
|
|
darth.setCropY(6);
|
|
darth.setCropWidth(7);
|
|
darth.setCropHeight(8);
|
|
|
|
assert.equal(darth.getCrop().x, 5);
|
|
assert.equal(darth.getCrop().y, 6);
|
|
assert.equal(darth.getCrop().width, 7);
|
|
assert.equal(darth.getCrop().height, 8);
|
|
|
|
assert.equal(darth.getCropX(), 5);
|
|
assert.equal(darth.getCropY(), 6);
|
|
assert.equal(darth.getCropWidth(), 7);
|
|
assert.equal(darth.getCropHeight(), 8);
|
|
|
|
done();
|
|
};
|
|
imageObj.src = 'assets/darth-vader.jpg';
|
|
});
|
|
|
|
// ======================================================
|
|
test.skip('image with svg source', function(done) {
|
|
var imageObj = new Image();
|
|
|
|
var stage = addStage();
|
|
var layer = new Konva.Layer();
|
|
|
|
imageObj.onload = function() {
|
|
var tiger = new Konva.Image({
|
|
x: 0,
|
|
y: 0,
|
|
image: imageObj,
|
|
draggable: true,
|
|
scale: { x: 0.25, y: 0.25 }
|
|
});
|
|
|
|
layer.add(tiger);
|
|
stage.add(layer);
|
|
|
|
done();
|
|
};
|
|
imageObj.src = 'assets/Ghostscript_Tiger.svg';
|
|
});
|
|
|
|
// ======================================================
|
|
test.skip('opacity test for image with svg source', function(done) {
|
|
var imageObj = new Image();
|
|
|
|
var stage = addStage();
|
|
var layer = new Konva.Layer();
|
|
|
|
layer.add(
|
|
new Konva.Line({
|
|
points: [0, 0, 578, 200],
|
|
stroke: 'black',
|
|
strokeWidth: 5
|
|
})
|
|
);
|
|
|
|
imageObj.onload = function() {
|
|
var tiger = new Konva.Image({
|
|
x: 0,
|
|
y: 0,
|
|
image: imageObj,
|
|
draggable: true,
|
|
scaleX: 0.25,
|
|
opacity: 0.5
|
|
});
|
|
|
|
layer.add(tiger);
|
|
|
|
layer.add(
|
|
new Konva.Line({
|
|
points: [578, 0, 0, 200],
|
|
stroke: 'blue',
|
|
strokeWidth: 5
|
|
})
|
|
);
|
|
|
|
stage.add(layer);
|
|
|
|
done();
|
|
};
|
|
imageObj.style.opacity = 0.5;
|
|
imageObj.src = 'assets/Ghostscript_Tiger.svg';
|
|
});
|
|
|
|
// ======================================================
|
|
test('image with opacity and shadow', function(done) {
|
|
var imageObj = new Image();
|
|
imageObj.onload = function() {
|
|
var stage = addStage();
|
|
|
|
var layer = new Konva.Layer();
|
|
var darth = new Konva.Image({
|
|
x: 200,
|
|
y: 60,
|
|
image: imageObj,
|
|
width: 100,
|
|
height: 100,
|
|
offset: { x: 50, y: 30 },
|
|
draggable: true,
|
|
opacity: 0.5,
|
|
shadowColor: 'black',
|
|
shadowBlur: 10,
|
|
shadowOpacity: 0.1,
|
|
shadowOffset: { x: 20, y: 20 }
|
|
});
|
|
|
|
layer.add(darth);
|
|
stage.add(layer);
|
|
|
|
var trace = layer.getContext().getTrace();
|
|
//console.log(trace);
|
|
assert.equal(
|
|
trace,
|
|
'clearRect(0,0,578,200);save();transform(1,0,0,1,150,30);save();globalAlpha=0.5;shadowColor=rgba(0,0,0,0.1);shadowBlur=10;shadowOffsetX=20;shadowOffsetY=20;drawImage([object HTMLImageElement],0,0,100,100);restore();restore();'
|
|
);
|
|
|
|
done();
|
|
};
|
|
imageObj.src = 'assets/darth-vader.jpg';
|
|
});
|
|
|
|
// ======================================================
|
|
test('image with stroke, opacity and shadow', function(done) {
|
|
var imageObj = new Image();
|
|
imageObj.onload = function() {
|
|
var stage = addStage();
|
|
|
|
var layer = new Konva.Layer();
|
|
var darth = new Konva.Image({
|
|
x: 200,
|
|
y: 60,
|
|
image: imageObj,
|
|
width: 100,
|
|
height: 100,
|
|
offset: { x: 50, y: 30 },
|
|
draggable: true,
|
|
opacity: 0.5,
|
|
shadowColor: 'black',
|
|
shadowBlur: 10,
|
|
shadowOpacity: 0.5,
|
|
shadowOffset: { x: 20, y: 20 },
|
|
stroke: 'red',
|
|
strokeWidth: 20
|
|
});
|
|
|
|
layer.add(darth);
|
|
stage.add(layer);
|
|
|
|
var trace = layer.getContext().getTrace();
|
|
//console.log(trace);
|
|
assert.equal(
|
|
trace,
|
|
'clearRect(0,0,578,200);save();save();shadowColor=rgba(0,0,0,0.5);shadowBlur=10;shadowOffsetX=20;shadowOffsetY=20;globalAlpha=0.5;drawImage([object HTMLCanvasElement],0,0,578,200);restore();restore();'
|
|
);
|
|
|
|
done();
|
|
};
|
|
imageObj.src = 'assets/darth-vader.jpg';
|
|
});
|
|
|
|
// ======================================================
|
|
test('image caching', function(done) {
|
|
var imageObj = new Image();
|
|
imageObj.onload = function() {
|
|
var stage = addStage();
|
|
var layer = new Konva.Layer();
|
|
var darth = new Konva.Image({
|
|
x: 200,
|
|
y: 60,
|
|
image: imageObj,
|
|
width: 100,
|
|
height: 100,
|
|
draggable: true
|
|
});
|
|
|
|
darth.cache();
|
|
layer.add(darth);
|
|
stage.add(layer);
|
|
|
|
assert.deepEqual(darth.getSelfRect(), {
|
|
x: 0,
|
|
y: 0,
|
|
width: 100,
|
|
height: 100
|
|
});
|
|
|
|
var canvas = createCanvas();
|
|
var context = canvas.getContext('2d');
|
|
context.drawImage(imageObj, 200, 60, 100, 100);
|
|
compareLayerAndCanvas(layer, canvas, 10);
|
|
done();
|
|
};
|
|
imageObj.src = 'assets/darth-vader.jpg';
|
|
});
|
|
|
|
test('image loader', function(done) {
|
|
var stage = addStage();
|
|
var layer = new Konva.Layer();
|
|
stage.add(layer);
|
|
var src = 'assets/darth-vader.jpg';
|
|
Konva.Image.fromURL(src, function(image) {
|
|
layer.add(image);
|
|
layer.draw();
|
|
assert.equal(image instanceof Konva.Image, true);
|
|
var nativeImg = image.image();
|
|
assert.equal(nativeImg instanceof Image, true);
|
|
assert.equal(nativeImg.src.indexOf(src) !== -1, true);
|
|
assert.equal(nativeImg.complete, true);
|
|
done();
|
|
});
|
|
});
|
|
});
|