我使用 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);
最佳答案
[编辑:答案更简单! ]
您可以相对于其当前位置(而不是其起始位置)变换动能元素
方法如下:
// 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();
这是代码和 fiddle :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>
关于canvas - KineticJS - 连续应用多个变换，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16547042/