动力学方法不是根据动力学文本使用动力学方法旋转
我想同时旋转动力学文本和动力学矩形。现在，动力学文本旋转正常，而动力学矩形不按动力学文本旋转。为了更清楚，让我们看看任务的形象。
现在，在第一个图像中，我通过单击添加文本按钮添加文本。在那个侧面矩形也显示。该矩形使用可调整大小的文本拖放文本。
在第二张图片中，我正在旋转带有中心和角矩形的文本。但在旋转时，只有矩形的文本和中心在旋转。但是矩形的角落没有旋转。
所以，我想同时旋转文本和矩形的中心来旋转它。
这是我的代码，
//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();
});
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？