代码之家 › 专栏 › 技术社区 › user3709279

当我抓取Kineticjs时旋转

kineticjs rotation html javascript

user3709279 · 技术社区 · 10 年前

我已经把我的呕吐物弄乱了,现在我需要在我尖叫时旋转它?有人能帮忙吗?谢谢:)

    fillPatternImage:imageObj,
                    x:-pieceWidth*i/2,
                    y:-pieceHeight*j/2,
                    stroke: "#000000",
                    strokeWidth: 4,
                    lineCap: "round",
                    draggable: true,
                x: i+pieceWidth/4 + (Math.random()*4)*((stage.getWidth()+pieceWidth)/12),
                y: j+pieceHeight/4 + (Math.random()*2)*((stage.getHeight()+pieceHeight)/12),
            });

Js投标: http://jsfiddle.net/vFez6/25/

1 回复 | 直到 10 年前

markE 10 年前

旋转画布图形的常规方法是:

保存上下文状态: context.save()
平移到所需的对象中心: context.translate(centerX,centerY)
按所需弧度角度旋转: context.rotate(Math.PI/4)
绘制偏移1/2宽度的对象&height:'context.fillRect(-width/2,-height/2,50,30)'
将上下文状态还原为其未旋转状态:“context.restore()”

enter image description here

示例代码和演示: http://jsfiddle.net/m1erickson/7aqwjddt/

rotateRectangle(150,150,75,50,45*Math.PI/180);

function rotateRectangle(centerX,centerY,width,height,radianAngle){
    ctx.save();
    ctx.translate(centerX,centerY);
    ctx.rotate(radianAngle);
    ctx.fillRect(-width/2,-height/2,width,height);
    ctx.restore();
}

推荐文章

Niko · 边框css更改速度快于变换旋转

6 年前

NOOBAF · 将数组传递给函数(C)

6 年前

Axel M · WPF自动旋转无极边界线ArgRadientBrush顺时针旋转,不旋转其余部分

6 年前

Mevia · 画布水平旋转img

6 年前

ThePurpleArcher · 统一if语句中四元数和eulerAngles的问题

6 年前

Nikolay Baranenko · Kafka循环垃圾收集日志

6 年前

E. Huckabee · SceneKit:使用平移手势将相机朝其面对的方向移动

6 年前

Thomas Schütt · javafx-如何将偏航、俯仰和滚动增量(而不是euler)应用于节点旋转轴,而不是场景旋转轴?

6 年前

Vinayak B · 确定片段重新启动是由于屏幕旋转还是浏览页面滑动?

6 年前

user9187461 · 管线旋转30度

6 年前