我的函数绘制一个图像,并使用 Kinetic.js 在另一层上绘制另一个图像,但我想裁剪名为 smsTopBg_image 的第二个图像
window.onload = function() {
//INITIALISATION
var stage = new Kinetic.Stage({
container: "iPhone",
width: 480,
height: 720
});
//LAYERS
var background_layer = new Kinetic.Layer();
var sms_layer = new Kinetic.Layer();
var text_layer = new Kinetic.Layer();
//ELEMENTS
var iPhoneBg = new Image();
iPhoneBg.onload = function() {
var iPhoneBg_image = new Kinetic.Image({
image: iPhoneBg
});
background_layer.add(iPhoneBg_image);
stage.add(background_layer);
}
iPhoneBg.src = "iPhoneBg.jpg";
//--------------------------------------------------
var smsTopBg = new Image();
smsTopBg.onload = function() {
var smsTopBg_image = new Kinetic.Image({
image: smsTopBg,
x: 10,
y: 10,
});
sms_layer.add(smsTopBg_image);
stage.add(sms_layer);
}
smsTopBg.src = "iPhoneBg.jpg";
};
Thanks !
您可以将可选的裁剪对象添加到图像构造函数中的主要属性对象中。
它有一个x, y, width and height
特性。
var smsTopBg_image = new Kinetic.Image({
image: smsTopBg,
x: 10,
y: 10,
// random values, choose your own :
crop: {
x: 20,
y: 3,
width: 100,
height: 42
}
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)