Question

我正在使用KineticJS来让用户操作他们的图像 - 裁剪，旋转，缩放，翻转等。

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

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

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

如何让它连续进行多次转换？

以下是小提琴的代码：

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);

Answer 1

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

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

以下是：

// 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>

KineticJS - 连续应用多个变换

1 个答案: