I want to rotate the kinetic text and kinetic rect simultaneously. Now, kinetic text is rotating fine, while the kinetic rect is not rotating as per the kinetic text. For more clear let see the image of the task.
Now, in the first image I have add the text by click the add text button. In that the sided rectangle also shown. That rectangle drag and drop the text with resizeable text.
While in the second image, I am rotating the text with the center and the corner rectangle. But while rotating, only text and center of the rectangle is rotating. But the corner of the rectangle is not rotating.
So, I want to rotate that also with simultaneously of rotating the text and the center of the rectangle.
Here is my code,
//addtext() function is used to add the text to the container.
$("ul#text #textsubmit").click(function(){
addText();
});
function addText() {
var text2 = $('#texts').val();
var fontfam = $('#fontfam').val();
var colour = $('#colour').val();
var textstroke = $('#textstroke').val();
var width = document.getElementById("textcount").clientWidth;
var height = document.getElementById("textcount").clientHeight;
var length = text2.length;
var rectwidth=width;
var shapesLayer = new Kinetic.Layer();
//add group
var group = new Kinetic.Group({
draggable: true
});
if(font==undefined)
{ var font=30; }
if(x==undefined)
{var x=250;}
if(y==undefined)
{var y=55;}
var complexText = new Kinetic.Text({
x: x,
y: y,
text: text2,
fontSize: font,
fontFamily: fontfam,
textFill: colour,
textStroke: textstroke
});
stage.add(shapesLayer);
if(rectheight==undefined)
{ var rectheight=50; }
if(rectwidth==undefined)
{ var rectwidth=250; }
var rectx=250;
var recty=40;
var rect = new Kinetic.Rect({ //Rectangle is made as per the name size for increase and descrease size
x: rectx,
y: recty,
width: rectwidth,
height: rectheight,
fill: "transparent",
stroke: "red",
strokeWidth: 1
});
var recttrx=width+243;
var recttry=32;
var recttr= new Kinetic.Rect({ //recttr is used to create the right top corner of the rectangle
x: recttrx,
y: recttry,
width: 15,
height: 15,
fill: "blue",
stroke: "green",
strokeWidth: 1,
offset: [recttrx, recttry]
});
var rectbrx=width+243;
var rectbry=82;
var rectbr= new Kinetic.Rect({ //rectbr is used to create the right bottom corner of the rectangle
x: rectbrx,
y: rectbry,
width: 15,
height: 15,
fill: "yellow",
stroke: "pink",
strokeWidth: 1,
offset: [rectbrx, rectbry]
});
var recttlx=243;
var recttly=32;
var recttl= new Kinetic.Rect({ //recttl is used to create the left top corner of the rectangle
x: recttlx,
y: recttly,
width: 15,
height: 15,
fill: "orange",
stroke: "white",
strokeWidth: 1,
offset: [recttlx, recttly]
});
var rectblx=243;
var rectbly=82;
var rectbl= new Kinetic.Rect({ //rectbl is used to create the left bottom corner of the rectangle
x: rectblx,
y: rectbly,
width: 15,
height: 15,
fill: "black",
stroke: "red",
strokeWidth: 1,
offset: [rectblx, rectbly]
})
rect.on("mouseover dragmove", function() {
var shapesLayer = this.getLayer();
document.body.style.cursor = "move";
recttl.setFill("black");
recttl.setStroke("red");
rectbl.setFill("black");
rectbl.setStroke("red");
rectbr.setFill("black");
rectbr.setStroke("red");
recttr.setFill("black");
recttr.setStroke("red");
rect.setStrokeWidth(1);
rect.setStroke("black");
shapesLayer.draw();
writeMessage(messageLayer, "Double Click To Remove");
})
rect.on("mouseout", function() {
var shapesLayer = this.getLayer();
document.body.style.cursor = "default";
recttl.setFill("transparent");
recttl.setStroke("transparent");
rectbl.setFill("transparent");
rectbl.setStroke("transparent");
rectbr.setFill("transparent");
rectbr.setStroke("transparent");
recttr.setFill("transparent");
recttr.setStroke("transparent");
rect.setStrokeWidth(0);
rect.setStroke("transparent");
shapesLayer.draw();
writeMessage(messageLayer, "");
})
complexText.on("mouseover dragmove", function() {
var shapesLayer = this.getLayer();
document.body.style.cursor = "move";
recttl.setFill("black");
recttl.setStroke("red");
rectbl.setFill("black");
rectbl.setStroke("red");
rectbr.setFill("black");
rectbr.setStroke("red");
recttr.setFill("black");
recttr.setStroke("red");
rect.setStrokeWidth(1);
rect.setStroke("black");
shapesLayer.draw();
writeMessage(messageLayer, "Drag Corners Increse Or Decrease Text Size");
})
complexText.on("mouseout", function() {
var shapesLayer = this.getLayer();
document.body.style.cursor = "default";
recttl.setFill("transparent");
recttl.setStroke("transparent");
rectbl.setFill("transparent");
rectbl.setStroke("transparent");
rectbr.setFill("transparent");
rectbr.setStroke("transparent");
recttr.setFill("transparent");
recttr.setStroke("transparent");
rect.setStrokeWidth(0);
rect.setStroke("transparent");
shapesLayer.draw();
writeMessage(messageLayer, "");
})
group.add(complexText);
group.add(rectbl);
group.add(recttr);
group.add(rectbr);
group.add(recttl);
group.add(rect);
shapesLayer.add(group);
shapesLayer.draw();
//bottom right square move start
rectbr.on("mousedown.event1 dragmove", function () {
var shapesLayer = this.getLayer();
rectbr.moveToTop();
document.body.style.cursor = "nw-resize";
rectbr.setFill("red");
var mousePos = stage.getMousePosition();
var xpos=mousePos.x;
var ypos=mousePos.y;
shapesLayer.draw();
//drag br
group.on("dragmove.event2", function () {
var shapesLayer = this.getLayer();
document.body.style.cursor = "nw-resize";
rectbr.setFill("blue");
//start mouse position and font size
var dragmousePos = stage.getMousePosition();
var dragxpos=dragmousePos.x;
var dragypos=dragmousePos.y;
if(dragypos > ypos)//drag increase
{
if(font>50)
{complexText.setFontSize(50);
writeMessage(messageLayer, "Maximum Font Size Reached");
complexText.setFontSize(font); }
else {
font=(font + 1);
complexText.setFontSize(font);
var textwidth=complexText.getTextWidth();
rectwidth=(textwidth);
rectbrx=244+textwidth;
recttrx=244+textwidth;
x=x+0;
y=y-0.5;
complexText.setPosition(x ,y);
rect.setWidth(rectwidth);
rect.setHeight(rectheight);
rectbr.setPosition(rectbrx, rectbry);
rectbl.setPosition(rectblx, rectbly);
recttl.setPosition(recttlx, recttly);
recttr.setPosition(recttrx, recttry);
rect.setPosition(rectx, recty);
writeMessage(messageLayer, "");
}
}
if(dragypos < ypos)//drag increase
{
if(font<21)
{complexText.setFontSize(20);
writeMessage(messageLayer, "Minimum Font Size Reached");
complexText.setFontSize(font); }
else {
font=(font-1);
complexText.setFontSize(font);
var textwidth=complexText.getTextWidth();
rectwidth=(textwidth);
rectbrx=rectblx+textwidth;
recttrx=recttlx+textwidth;
x=x+0;
y=y+0.5;
complexText.setPosition(x ,y);
rect.setWidth(rectwidth);
rect.setHeight(rectheight);
rectbr.setPosition(rectbrx, rectbry);
rectbl.setPosition(rectblx, rectbly);
recttl.setPosition(recttlx, recttly);
recttr.setPosition(recttrx, recttry);
rect.setPosition(rectx, recty);
writeMessage(messageLayer, "");
}
}
shapesLayer.draw();
})
})
//end bottom right square
//bottom left square move start
rectbl.on("mousedown.event1 dragmove", function () {
var shapesLayer = this.getLayer();
rectbl.moveToTop();
document.body.style.cursor = "nw-resize";
rectbl.setFill("red");
var mousePos = stage.getMousePosition();
var xpos=mousePos.x;
var ypos=mousePos.y;
shapesLayer.draw();
group.on("dragmove.event2", function () {
var shapesLayer = this.getLayer();
document.body.style.cursor = "nw-resize";
rectbl.setFill("blue");
//start mouse position and font size
var dragmousePos = stage.getMousePosition();
var dragxpos=dragmousePos.x;
var dragypos=dragmousePos.y;
if(dragypos > ypos)//drag increase
{
if(font>50)
{complexText.setFontSize(50);
writeMessage(messageLayer, "Maximum Font Size Reached");
complexText.setFontSize(font); }
else {
font=(font + 1);
complexText.setFontSize(font);
var textwidth=complexText.getTextWidth();
rectwidth=(textwidth);
rectbrx=244+textwidth;
recttrx=244+textwidth;
x=x+0;
y=y-0.5;
complexText.setPosition(x ,y);
rect.setWidth(rectwidth);
rect.setHeight(rectheight);
rectbr.setPosition(rectbrx, rectbry);
rectbl.setPosition(rectblx, rectbly);
recttl.setPosition(recttlx, recttly);
recttr.setPosition(recttrx, recttry);
rect.setPosition(rectx, recty);
writeMessage(messageLayer, "");
}
}
if(dragypos < ypos)//drag increase
{
if(font<21)
{complexText.setFontSize(20);
writeMessage(messageLayer, "Minimum Font Size Reached");
complexText.setFontSize(font); }
else {
font=(font-1);
complexText.setFontSize(font);
var textwidth=complexText.getTextWidth();
rectwidth=(textwidth);
rectbrx=rectblx+textwidth;
recttrx=recttlx+textwidth;
x=x+0;
y=y+0.5;
complexText.setPosition(x ,y);
rect.setWidth(rectwidth);
rect.setHeight(rectheight);
rectbr.setPosition(rectbrx, rectbry);
rectbl.setPosition(rectblx, rectbly);
recttl.setPosition(recttlx, recttly);
recttr.setPosition(recttrx, recttry);
rect.setPosition(rectx, recty);
writeMessage(messageLayer, "");
}
}
shapesLayer.draw();
})
})
//end bottom left square
//top left right square move start
recttl.on("mousedown.event1 dragmove", function () {
var shapesLayer = this.getLayer();
recttl.moveToTop();
document.body.style.cursor = "nw-resize";
recttl.setFill("red");
var mousePos = stage.getMousePosition();
var xpos=mousePos.x;
var ypos=mousePos.y;
shapesLayer.draw();
//drag br
group.on("dragmove.event2", function () {
var shapesLayer = this.getLayer();
document.body.style.cursor = "nw-resize";
recttl.setFill("blue");
//start mouse position and font size
var dragmousePos = stage.getMousePosition();
var dragxpos=dragmousePos.x;
var dragypos=dragmousePos.y;
if(dragypos > ypos)//drag increase
{
if(font>50)
{complexText.setFontSize(50);
writeMessage(messageLayer, "Maximum Font Size Reached");
complexText.setFontSize(font); }
else {
font=(font + 1);
complexText.setFontSize(font);
var textwidth=complexText.getTextWidth();
rectwidth=(textwidth);
rectbrx=244+textwidth;
recttrx=244+textwidth;
x=x+0;
y=y-0.5;
complexText.setPosition(x ,y);
rect.setWidth(rectwidth);
rect.setHeight(rectheight);
rectbr.setPosition(rectbrx, rectbry);
rectbl.setPosition(rectblx, rectbly);
recttl.setPosition(recttlx, recttly);
recttr.setPosition(recttrx, recttry);
rect.setPosition(rectx, recty);
writeMessage(messageLayer, "");
}
}
if(dragypos < ypos)//drag increase
{
if(font<21)
{complexText.setFontSize(20);
writeMessage(messageLayer, "Minimum Font Size Reached");
complexText.setFontSize(font); }
else {
font=(font-1);
complexText.setFontSize(font);
var textwidth=complexText.getTextWidth();
rectwidth=(textwidth);
rectbrx=rectblx+textwidth;
recttrx=recttlx+textwidth;
x=x+0;
y=y+0.5;
complexText.setPosition(x ,y);
rect.setWidth(rectwidth);
rect.setHeight(rectheight);
rectbr.setPosition(rectbrx, rectbry);
rectbl.setPosition(rectblx, rectbly);
recttl.setPosition(recttlx, recttly);
recttr.setPosition(recttrx, recttry);
rect.setPosition(rectx, recty);
writeMessage(messageLayer, "");
}
}
shapesLayer.draw();
})
})
//end bottom top left square
//top right square move start
recttr.on("mousedown.event1 dragmove", function () {
var shapesLayer = this.getLayer();
recttr.moveToTop();
document.body.style.cursor = "nw-resize";
recttr.setFill("red");
var mousePos = stage.getMousePosition();
var xpos=mousePos.x;
var ypos=mousePos.y;
shapesLayer.draw();
//drag br
group.on("dragmove.event2", function () {
var shapesLayer = this.getLayer();
document.body.style.cursor = "nw-resize";
recttr.setFill("blue");
//start mouse position and font size
var dragmousePos = stage.getMousePosition();
var dragxpos=dragmousePos.x;
var dragypos=dragmousePos.y;
if(dragypos > ypos)//drag increase
{
if(font>50)
{complexText.setFontSize(50);
writeMessage(messageLayer, "Maximum Font Size Reached");
complexText.setFontSize(font); }
complexText.setFontSize(font); }
else {
font=(font + 1);
complexText.setFontSize(font);
var textwidth=complexText.getTextWidth();
rectwidth=(textwidth);
rectbrx=244+textwidth;
recttrx=244+textwidth;
x=x+0;
y=y-0.5;
complexText.setPosition(x ,y);
rect.setWidth(rectwidth);
rect.setHeight(rectheight);
rectbr.setPosition(rectbrx, rectbry);
rectbl.setPosition(rectblx, rectbly);
recttl.setPosition(recttlx, recttly);
recttr.setPosition(recttrx, recttry);
rect.setPosition(rectx, recty);
writeMessage(messageLayer, "");
}
}
if(dragypos < ypos)//drag increase
{
if(font<21)
{complexText.setFontSize(20);
writeMessage(messageLayer, "Minimum Font Size Reached");
complexText.setFontSize(font); }
else {
font=(font-1);
complexText.setFontSize(font);
var textwidth=complexText.getTextWidth();
rectwidth=(textwidth);
rectbrx=rectblx+textwidth;
recttrx=recttlx+textwidth;
x=x+0;
y=y+0.5;
complexText.setPosition(x ,y);
rect.setWidth(rectwidth);
rect.setHeight(rectheight);
rectbr.setPosition(rectbrx, rectbry);
rectbl.setPosition(rectblx, rectbly);
recttl.setPosition(recttlx, recttly);
recttr.setPosition(recttrx, recttry);
rect.setPosition(rectx, recty);
writeMessage(messageLayer, "");
}
}
shapesLayer.draw();
})
})
//end top right square
//end square
rect.on("dblclick", function(){
var shapesLayer=this.getLayer();
group.remove(complexText);
group.remove(rect);
group.remove(recttl);
group.remove(recttr);
group.remove(rectbl);
group.remove(rectbr);
shapesLayer.clear();
shapesLayer.draw();
});
//This is the function of rotation the text by click event
rect.on("click", function() {
rect.setRotationDeg(complexText.getRotationDeg()-10);
recttl.setRotationDeg(rect.getRotationDeg()-10);
rectbl.setRotationDeg(rect.getRotationDeg()-10);
recttr.setRotationDeg(rect.getRotationDeg()-10);
rectbr.setRotationDeg(rect.getRotationDeg()-10);
complexText.setRotationDeg(rect.getRotationDeg()-10);
shapesLayer.draw();
layer.draw();
});