如何使用动态jquery方法在画布中旋转文本
我想在鼠标点击时将文字旋转360度。请参阅下面的图片了解更多详情。
正如您在图像中看到的文字“ddddd”，我想按照鼠标单击旋转此文本。这是我的代码，
//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
});
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
});
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
});
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
})
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 Or Edit Text");
})
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("click", function(){
alert();
var layer = this.getLayer();
angle=getRandomInt(1,4);
text.transitionTo({
rotation:Math.PI*angle/2,
duration:1
});
layer.draw();
});
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();
//drag br
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); }
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(){
// group.remove(complexText);
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();
});
complexText.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();
});
//start dragging
group.on("dragend", function() {
rectbr.off("dragmove.event1");
group.off("dragmove.event2");
document.body.style.cursor = "default";
}, false)
group.on("dragend", function() {
rectbl.off("dragmove.event1");
group.off("dragmove.event2");
document.body.style.cursor = "default";
}, false)
group.on("dragend", function() {
recttl.off("dragmove.event1");
group.off("dragmove.event2");
document.body.style.cursor = "default";
}, false)
group.on("dragend", function() {
recttr.off("dragmove.event1");
group.off("dragmove.event2");
document.body.style.cursor = "default";
}, false)
//end dragging
rectbr.on("mouseout", function () {
var shapesLayer = this.getLayer();
rectbr.setFill("#black");
rectbr.off("dragmove.event1");
group.off("dragmove.event2");
document.body.style.cursor = "default";
shapesLayer.draw();
})
rectbl.on("mouseout", function () {
var shapesLayer = this.getLayer();
rectbl.setFill("#black");
rectbl.off("dragmove.event1");
group.off("dragmove.event2");
document.body.style.cursor = "default";
shapesLayer.draw();
})
recttr.on("mouseout", function () {
var shapesLayer = this.getLayer();
recttr.setFill("#black");
recttr.off("dragmove.event1");
group.off("dragmove.event2");
document.body.style.cursor = "default";
shapesLayer.draw();
})
recttl.on("mouseout", function () {
var shapesLayer = this.getLayer();
recttl.setFill("#black");
recttl.off("dragmove.event1");
group.off("dragmove.event2");
document.body.style.cursor = "default";
shapesLayer.draw();
})
rectbr.on("mouseover dragmove", function () {
var shapesLayer = this.getLayer();
rect.setStrokeWidth(1);
rect.setStroke("black");
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();
})
rectbl.on("mouseover dragmove", function () {
var shapesLayer = this.getLayer();
rect.setStrokeWidth(1);
rect.setStroke("black");
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();
})
recttr.on("mouseover dragmove", function () {
var shapesLayer = this.getLayer();
rect.setStrokeWidth(1);
rect.setStroke("black");
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();
})
recttl.on("mouseover dragmove", function () {
var shapesLayer = this.getLayer();
rect.setStrokeWidth(1);
rect.setStroke("black");
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();
})
recttl.on("mouseout", function (){
var shapeslayer= this.getLayer();
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();
})
recttr.on("mouseout", function (){
var shapeslayer= this.getLayer();
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();
})
rectbl.on("mouseout", function (){
var shapeslayer= this.getLayer();
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();
})
rectbr.on("mouseout", function (){
var shapeslayer= this.getLayer();
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();
})
//end mouse out of squares
//end mouse out of squares
// add the shapes to the layer
shapesLayer.add(group);
// add the shape to the layer
// add the layer to the stage
}
现在，当单击“addtext”按钮时会发生此事件。
1 个答案:
答案 0 :(得分：2)
您可以使用rotate功能。这是使用KonvaJs的demo，但概念是相同的。如果可能，请开始使用KonvaJS。它是KineticJs的升级版本并且维护得很好。
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.rawgit.com/konvajs/konva/1.4.0/konva.min.js"></script>
<meta charset="utf-8">
<title>Konva Rotation Animation Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #F0F0F0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
var width = window.innerWidth;
var height = window.innerHeight;
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height
});
var layer = new Konva.Layer();
/*
* leave center point positioned
* at the default which is the top left
* corner of the rectangle
*/
var blueRect = new Konva.Rect({
x: 50,
y: 75,
width: 100,
height: 50,
fill: '#00D2FF',
stroke: 'black',
strokeWidth: 4
});
/*
* move center point to the center
* of the rectangle with offset
*/
var yellowRect = new Konva.Rect({
x: 220,
y: 75,
width: 100,
height: 50,
fill: 'yellow',
stroke: 'black',
strokeWidth: 4,
offset: {
x: 50,
y: 25
}
});
/*
* move center point outside of the rectangle
* with offset
*/
var redRect = new Konva.Rect({
x: 400,
y: 75,
width: 100,
height: 50,
fill: 'red',
stroke: 'black',
strokeWidth: 4,
offset: {
x: -100,
y: 0
}
});
layer.add(blueRect);
layer.add(yellowRect);
layer.add(redRect);
stage.add(layer);
// one revolution per 4 seconds
var angularSpeed = 90;
var anim = new Konva.Animation(function(frame) {
var angleDiff = frame.timeDiff * angularSpeed / 1000;
blueRect.rotate(angleDiff);
yellowRect.rotate(angleDiff);
redRect.rotate(angleDiff);
}, layer);
anim.start();
</script>
</body>
</html>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？