kineticjs rect fillText - javascript

I have KineticJS rect already fill with 'blue' color, I want to show Text on this rect box. But my below code not showing anything. Also I need to assign this label text on button click, the code for the same is also below.
drawShape = new Kinetic.Rect({
id: shapeId,
name: shapeName,
x: 0,
y: 0,
width: 150,
height: 40,
fill: "#00D2FF",
stroke: "black",
strokeWidth: 3,
fillText: "Step" + stepNumber
});
function OnApplyPropertiesClick(){
drawShape.fillText(document.getElementById("txtLabel").value);
}
any help on this?? please.
Thanks
Biru

I don't think you can add text to a rectangle object, only a fill type of:
[color, linear gradient, radial gradient, or pattern]
To solve this i created a group, then added a rectangle and text object to it, when i wanted to create a rectangle with text on it:
var group = new Kinetic.Group({
});
var rectangle = new Kinetic.Rect({
x: 5,
y: 5,
width: 80,
height: 35,
fill: "green",
stroke: "black",
strokeWidth: 2
});
var rectangleText = new Kinetic.Text({
x: 15,
y: 10,
text: 'test',
fontSize: 20,
fontFamily: 'Calibri',
textFill: 'black'
});
group.add(rectangle);
group.add(rectangleText);
layer.add(group);
You should be able to adapt your listener to then apply it to this.
I've done a jsfiddle to show what i mean:
http://jsfiddle.net/B85Ff/

Have you added drawShape to any layer yet? Doesn't appear in the snippet you posted.
Also, you need to draw the layer (like a refresh) at the end of your OnApplyPropertiesClick() function.

Related

Fabric JS Replace Objects with Same Item(ID)

I need to replace the Circle shape with Rectangle shape with same Item Number used by canvas
First I created Circle :
canvas.add(new fabric.Circle({
left: 200,
top: 200,
radius: 30,
fill: 'gray',
stroke: 'black',
strokeWidth: 3}));
Then replace with Rectangle:
var Rectangle = new fabric.Rect({
width: 100,
height: 150,
fill: 'blue',
stroke: 'red' });
Assume that Circle is canvas.item(0) i need to replace Rectangle with same Id canvas.item(0) :
Something like This :
canvas.item(0).replace(Rectangle);
You can remove the rectangle with canvas.remove(Circle)
and add the new item with canvas.insertAt(Rectangle, 0, false).
see: insertAt fabricJS Docs

How to scale a text object?

var loginText = new Kinetic.Text({
x: 5,
y: 5,
text: 'login: someLogin',
fontSize: 14,
fontFamily: 'Arial',
fill: 'green'
});
loginText.scaleX(4);
loginText.scaleY(4);
I'am trying to scale a Kinetic.Text object, but nothing happens, I don't know if its possible, I've also tried this:
loginText.fillPatternScale({
x: 4
y: 4
});
but still nothings happens, any ideas?
The answer provided by markE should work.
Here is the complete code and a fiddle example where you can see it work: http://jsfiddle.net/J8vju/
var stage = new Kinetic.Stage({
width: 400,
height: 400,
container: 'container'
});
var layer = new Kinetic.Layer();
var loginText = new Kinetic.Text({
x: 5,
y: 5,
text: 'login: someLogin',
fontSize: 14,
fontFamily: 'Arial',
fill: 'green'
});
var loginText2 = loginText.clone({y: 200});
loginText.scaleX(4);
loginText.scaleY(4);
layer.add(loginText);
layer.add(loginText2);
stage.add(layer);
stage.draw();
You must add the text object to the layer and then layer.draw to redisplay the layer:
var loginText = new Kinetic.Text({
x: 5,
y: 5,
text: 'login: someLogin',
fontSize: 14,
fontFamily: 'Arial',
fill: 'green'
});
loginText.scaleX(4);
loginText.scaleY(4);
layer.add(loginText);
layer.draw();
scaleX should work check out this example here just add this line
simpleText.scaleX(2);
as line number thirty(30) to this example. You will see the scaleX effect on the text working in the example.Make sure you are scaling it before adding line to the layar.Hope that helps.

Drag while in background in KineticJs

I have two layers generally representing a large background and some content on top of it.
I have made the background draggable but when dragged, it covers the content of the other layer.
Is it possible to keep it in the background while dragging it?
I have tried binding the drag events with .moveToBottom() for the background group (later added to backgroundLayer) like that:
groupBackground.on('dragstart',function(){
groupBackground.moveToBottom();
});
groupBackground.on('dragmove',function(){
groupBackground.moveToBottom();
});
groupBackground.on('dragend',function(){
groupBackground.moveToBottom();
});
but to no result.
You can “draw under” by using the canvas “.globalCompositeOperation”
This will allow your user to drag the background under the foreground.
And you can apply it to KineticJs like this:
layer.getContext().globalCompositeOperation = "destination-over";
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/2GFSE/
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
stage.add(layer);
var background = new Kinetic.Rect({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
width: 250,
height: 250,
fill: 'black',
stroke: 'black',
strokeWidth: 4,
draggable: true
});
var foreground = new Kinetic.Ellipse({
x: stage.getWidth() / 3,
y: stage.getHeight() / 3,
radius: {
x: 50,
y: 30
},
fill: 'red',
stroke: 'black',
strokeWidth: 4
});
// add the background and foreground to the layer
layer.add(foreground);
layer.draw();
layer.getContext().globalCompositeOperation = "destination-over";
layer.add(background);
layer.draw();

KineticJS / Javascript dynamic creation and immediate dragging

What I want do is dynamically create a shape on mousedown, and then immediately have it (the shape) follow the mouse cursor until mouseup sets it in place.
Here is what I have so far and it's not working for me.
addNegativeButton.on('mousedown', function(){
var userPos = stage.getUserPosition();
shapesLayer.add(new Kinetic.Image({
image: imageObj,
x: userPos.x,
y: userPos.y,
height: 25,
width: 25,
rotation: 1,
draggable: true,
offset: 12
}));
var last = shapesLayer.getChildren()[shapesLayer.getChildren().length -1];
stage.on("mouseup", function(){
last.setAbsolutePosition(stage.getUserPosition());
stage.off("mouseup");
});
To reiterate:
What I have is an 'addNegativeButton' which when clicked creates a shape.
But I want it to follow the mouse cursor until the click is released.
http://jsfiddle.net/CPrEe/37/
Any suggestions?
Turns out its rather simple ;)
After you add the element/shape, all you have to do is use the simulate function to simulate mouse down and it drags....
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 20,
y: 20,
width: 100,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 4
});
//What I really want here is to start dragging the circle until the
//user releases the mouse, which would then place the circle.
rect.on('mousedown', function(evt) {
var userPos = stage.getUserPosition();
var latestElement = new Kinetic.Circle({
x: userPos.x,
y: userPos.y,
radius: 20,
fill: 'red',
stroke: 'black',
strokeWidth: 4,
draggable: true
})
layer.add(latestElement);
// Here's the bit you want. After adding the circle (with draggable:true) simulate the mousedown event on it which will initiate the drag
latestElement.simulate('mousedown');
layer.draw();
});
layer.add(rect);
stage.add(layer);​
http://jsfiddle.net/CPrEe/38/
http://kineticjs.com/docs/symbols/Kinetic.Node.php#simulate

Reset to Default position with KineticJS

I have the following circles in my game. The player drags them into different locations in the game. When the player selects, play again, I want the shapes to go back to the original position stated in the init function. How should I go about this? Thank you.
stage = new Kinetic.Stage({
container: "container",
width: 900,
height: 550
});
shapes = new Kinetic.Layer();
function init() {
circle1 = new Kinetic.Circle({
x: stage.getWidth() / 3.2,
y: stage.getHeight() / 3.2,
radius: radius,
fill: "blue",
stroke: "black",
strokeWidth: 4,
name: "circle",
draggable: true
});
shapes.add(circle1)
stage.add(shapes)
Store defaults in a separate variable, then use .setPosition( x, y ) to reset it:
//store settings
var settings = {
x: stage.getWidth() / 3.2,
y: stage.getHeight() / 3.2,
radius: radius,
fill: "blue",
stroke: "black",
strokeWidth: 4,
name: "circle",
draggable: true
};
//use settings
circle1 = new Kinetic.Circle(settings);
//after move, reset using:
circle1.setPosition(settings.x,settings.y);
you can also use the super handy setAttrs method like this:
circle1.setAttrs(settings);
Cheers!
I know this question is fairly old but I just solved something like this.
stage.removeChildren();
stage.setAttrs(stage.defaultNodeAttrs);
The stage.reset() doesn't work anymore, but this should do what you want.

Categories

Resources