KineticJS - 连续应用多个变换答案

【问题标题】：KineticJS - Multiple transforms applied seriallyKineticJS - 连续应用多个变换
【发布时间】：2013-05-08 23:05:22
【问题描述】：

我正在使用 KineticJS 来允许用户操作他们的图像——裁剪、旋转、缩放、翻转等。

当我对图像应用任何变换时，效果都很好。但是当我应用第二个变换时，它会作用于原始的、未变换的图像，而不是我的新图像。

这是一个简化的 jsfiddle：http://jsfiddle.net/sdWPj/ 单击缩放按钮两次 - 它应该不断增加大小。单击旋转按钮两次，图像应保持在屏幕上。

我知道为什么会这样。这是因为变换并没有改变实际的图像，它们只是改变了我看到该图像的方式。但我希望它改变实际的形象。也许我可以在每次变换后保存图像或展平舞台？

我怎样才能让它连续进行多次转换？

这是 Fiddle 的代码：

HTML：

<button id="scale">Scale</button>
<button id="rotate">Rotate photo</button>
<div id="container"></div>

JavaScript：

var photoPath = "http://www.html5canvastutorials.com/demos/assets/yoda.jpg";
var stage;
var photo;
stage = new Kinetic.Stage({
    container: 'container',
    width: 0,
    height: 0
});
var layer = new Kinetic.Layer({
    id: "imageLayer"
});
var originalImage = new Image();
originalImage.src = photoPath;
originalImage.onload = function () {
    photo = new Kinetic.Image({
        id: "image",
        image: originalImage
    });
    stage.setHeight(originalImage.height);
    stage.setWidth(originalImage.width);
    layer.add(photo);
    stage.add(layer);
};
var scale = function () {
    var image = stage.get('#image')[0];
    var scale = 1.5;
    image.setScale(scale, scale);
    stage.draw();
};
var rotate = function () {
    var angle = 90;
    var image = stage.get('#image')[0];
    image.rotateDeg(angle);
    image.setX(image.getHeight());
    stage.draw();
};
document.getElementById('scale').addEventListener('click', scale, false);
document.getElementById('rotate').addEventListener('click', rotate, false);

【问题讨论】：

标签： canvas html5-canvas kineticjs

【解决方案1】：

[编辑：更简单的答案！ ]

您可以相对于其当前位置（而不是其起始位置）转换 Kinetic 元素

方法如下：

// translate from its current position
rect.move(10,0); 
layer.draw();

// rotate from its current angle
rect.rotate(20*Math.PI/180); 
layer.draw(); 

// scale from its current size
rect.setScaleX(rect.getScaleX()*1.1);
rect.setScaleY(rect.getScaleY()*1.1);
layer.draw();

这是代码和小提琴：http://jsfiddle.net/m1erickson/Z6Yg8/

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Prototype</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.1.min.js"></script>

<style>
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
  width:300px;
}
</style>        
<script>
$(function(){

    var stage = new Kinetic.Stage({
        container: 'container',
        width: 300,
        height: 300
    });
    var layer = new Kinetic.Layer();
    stage.add(layer);


    var rect = new Kinetic.Rect({
      name:"rect1",
      x: 80,
      y: 80,
      width: 50,
      height: 20,
      offset:[50/2,20/2],
      fill: "lightgray",
      stroke: "skyblue",
      strokeWidth: 3
    });
    layer.add(rect);
    stage.draw();


    $("#translate").click(function(){ 
        rect.move(10,0); 
        layer.draw();
    });

    $("#rotate").click(function(){ 
        rect.rotate(20*Math.PI/180); 
        layer.draw(); 
    });

    $("#scale").click(function(){
        rect.setScaleX(rect.getScaleX()*1.1);
        rect.setScaleY(rect.getScaleY()*1.1);
        layer.draw(); 
    });

}); // end $(function(){});

</script>       
</head>

<body>
    <div id="container"></div>
    <button id="translate">TranslateX +25 </button>
    <button id="rotate">Rotate +5degrees</button>
    <button id="scale">Scale *1.10</button>
</body>
</html>

【讨论】：

谢谢，@markE，很棒的设计模式，但它并没有解决当变换堆叠时，它们与原始图像堆叠的问题。我们需要做的是在每次变换后“压平”图像。如何每次重新设置图像？
哇。正是我需要的。谢谢。