my function draw an image, and another image on another layer with Kinetic.js but i want to crop the second image which is named 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 !
You can add an optional crop object to the main attributes object in your Image constructor.
It has an x, y, width and height properties.
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
}
});
Ok ifound the complete solution with your help, it's necessary to add height and with to the image before crop like that :
var smsTopBg = new Image();
smsTopBg.onload = function() {
var smsTopBg_image = new Kinetic.Image({
image: smsTopBg,
x: 200,
y: 20,
width: 50,
height: 20,
crop: {
x: 20,
y: 10,
width: 50,
height: 50
}
});
sms_layer.add(smsTopBg_image);
stage.add(sms_layer);
}
Thanks !
Refer this url for Image Crop in Kinetic.js : http://jsfiddle.net/umhm7/
Related
I have tried following
first load the image into the stage.
function loadPhoneImage() {
phoneImageStage = new Konva.Stage({
container: 'phoneContainer',
width: 600,
height: 550
});
phoneImageLayer = new Konva.Layer();
phoneImageStage.add(phoneImageLayer);
var phoneImg = new Konva.Image({
x: 30,
y: 20,
width: 450,
height: 500
});
phoneImageLayer.add(phoneImg);
var phoneImage = new Image();
var self = this;
phoneImage.onload = function () {
phoneImg.image(phoneImage);
phoneImageLayer.draw();
};
phoneImage.src = '../Content/Avaya_Phone.png';
}
Then programmatically added some labels on it
function loadPhoneNumberLabel(label) {
var phoneText = new Konva.Text({
x: 135,
y: 73,
text: label,
fontSize: 9,
width: 200,
fontFamily: 'Calibri',
fill: 'black',
align: 'right'
});
phoneImageLayer.add(phoneText);
}
After this i want to scale this image as per the browser size and also label position should not be changed on the image.so i have tried this
function fitStageIntoParentContainer() {
//var stageWidth = document.getElementsByClassName("msgbox")[0].offsetWidth;
//var stageHeight = document.getElementsByClassName("msgbox")[0].clientHeight;
var stageWidth=$( window ).width();
var stageHeight=$( window ).height();
//var stageWidth=$('#phoneContainer').width();;
//var stageHeight=$('#phoneContainer').height();
console.log(stageWidth);
console.log(stageHeight);
var container = document.querySelector('#phoneContainer');
if(container){
// now we need to fit stage into parent
var containerWidth = $('#phoneContainer').width();
var containerHeight = $('#phoneContainer').height();
// to do this we need to scale the stage
var scale = (containerWidth/ stageWidth);
scale=1;
console.log(scale);
phoneImageStage.width(containerWidth);
phoneImageStage.height(containerHeight);
//phoneImageStage.width(containerWidth);
//phoneImageStage.height(containerWidth);
phoneImageStage.scale({ x: scale, y: scale });
var phoneImg = new Konva.Image({
x: 30,
y: 20,
width: 200,
height: 300
});
phoneImageLayer.add(phoneImg);
var phoneImage = new Image();
var self = this;
phoneImage.onload = function () {
phoneImg.image(phoneImage);
phoneImageLayer.draw();
};
phoneImage.src = '../Content/Avaya_Phone.png';
phoneImageStage.draw();
}
}
it scaling the image but not in the same scale as browser.
Would appreciate any help on this.
I have a script that works properly, shows an image and you can drag and drop that image. But my problem is: how can I add more images? If I copy the same code, it doesn't show two images.
<script src="http://d3lp1msu2r81b...c-v5.0.2.min.js"></script>
<script defer="defer">
function drawImage(imageObj) {
var stage = new Kinetic.Stage({
container: "container",
width: 800,
height: 600
});
var layer = new Kinetic.Layer();
// darth vader
var darthVaderImg = new Kinetic.Image({
image: imageObj,
x: 100,
y: 30,
width: 40,
height: 40,
draggable: true
});
// add cursor styling
darthVaderImg.on('mouseover', function() {
document.body.style.cursor = 'pointer';
});
darthVaderImg.on('mouseout', function() {
document.body.style.cursor = 'default';
});
layer.add(darthVaderImg);
stage.add(layer);
}
var imageObj = new Image();
imageObj.onload = function() {
drawImage(this);
};
imageObj.src = 'adorno1.png';
</script>
function drawImage(imageObj) {
var stage = new Kinetic.Stage({
container: "container",
width: 800,
height: 600
});
var layer = new Kinetic.Layer();
// darth vader
var darthVaderImg = new Kinetic.Image({
image: imageObj,
x: 0,
y: 0,
width: 100,
height: 100,
draggable: true
});
var darthVaderImg1 = new Kinetic.Image({
image: imageObj1,
x: 100,
y: 100,
width:100,
height: 100,
draggable: true
});
// add cursor styling
darthVaderImg.on('mouseover', function() {
document.body.style.cursor = 'pointer';
});
darthVaderImg.on('mouseout', function() {
document.body.style.cursor = 'default';
});
layer.add(darthVaderImg);
layer.add(darthVaderImg1);
stage.add(layer);
}
var imageObj = new Image();
var imageObj1 = new Image();
imageObj.onload = function() {
drawImage(this);
};
imageObj1.onload = function() {
drawImage(this);
};
imageObj.src='http://i.forbesimg.com/media/lists/companies/google_416x416.jpg';
imageObj1.src='http://i.forbesimg.com/media/lists/companies/google_416x416.jpg';
here is the answer for your question
http://jsfiddle.net/ajayholla/71qrotzz/5/
I am simply trying to render an image with Kinetic, but nothing appears, nor do i get an error.
The fiddle can be found here.
Source code:
$( function() {
var stage = new Kinetic.Stage({
container: 'container',
width: 400,
height: 800
});
var layer = new Kinetic.Layer();
var yoda = new Kinetic.Image({
x: 0,
y: 0,
width: 200,
height: 400
});
var imageObj = new Image();
imageObj.src = 'http://farm6.staticflickr.com/5448/9408019718_88934b087e_b.jpg';
imageObj.onload = function() {
yoda.setImage(imageObj);
layer.draw();
};
layer.add(yoda);
stage.add(layer);
});
You must use <div> container for KineticJS Stage:
<div id="container"></div>
http://jsfiddle.net/ro1zpkaL/1/
if I have an image on stage:
var stage = new Kinetic.Stage({
container : "cantainer",
width : 400,
height : 400
});
var layer = new Kinetic.Layer();
stage.add(layer);
var img = new Image();
img.src ="https://upload.wikimedia.org/wikipedia/commons/3/34/Red_star.svg"
img.onload = function(){
pic = new Kinetic.Image({ x: 0, y: 0, width: 251, height: 231,image: img});
layer.add(pic);
layer.draw();
}
how do I change the x/y values from "pic" afterwards...?
THX!
Give Kinetic Image also an id to make it easier to trace out:
pic = new Kinetic.Image({
x: 0,
y: 0,
width: 251,
height: 231,
image: img,
id: 'img1'
});
After image is added to layer, you can use:
var x = [your x];
var y = [your y];
layer.get('#img1')[0].setPosition(x,y);
layer.draw();
I have a KineticJS Stage with one layer. Here is a demo: http://jsfiddle.net/confile/7QTmz/
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var imageObj = new Image();
imageObj.onload = function () {
var yoda = new Kinetic.Image({
x: 200,
y: 50,
image: imageObj,
width: 106,
height: 118
});
// add the shape to the layer
layer.add(yoda);
// add the layer to the stage
stage.add(layer);
stage.size({
width: 100,
height: 200
});
layer.draw();
stage.draw();
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg';
How can I resize the stage such that stage.toDataUrl() will return an image with the new dimensions?
You can 2X the stage and its content like this (also...thanks to #Greg for info on stage.size):
var scaleFactor=2;
stage.size({width:stage.width()*scaleFactor,height:stage.height()*scaleFactor});
stage.scaleX(scaleFactor);
stage.scaleY(scaleFactor);
stage.draw();