Javascript 使用KineticJS变换(移动/缩放/旋转)形状
我正在尝试为KineticJS构建一个转换管理器,它将构建一个边界框,允许用户在画布上缩放、移动和旋转图像。我被锚定点的逻辑绊倒了 我只想允许用户从任意角度按比例缩放图像,并在按住拖动锚点时旋转 有人能帮我指出正确的方向吗Javascript 使用KineticJS变换(移动/缩放/旋转)形状,javascript,transform,kineticjs,Javascript,Transform,Kineticjs,我正在尝试为KineticJS构建一个转换管理器,它将构建一个边界框,允许用户在画布上缩放、移动和旋转图像。我被锚定点的逻辑绊倒了 我只想允许用户从任意角度按比例缩放图像,并在按住拖动锚点时旋转 有人能帮我指出正确的方向吗 谢谢大家! 这是我做的旋转控制的概念证明: 在拖动控件时,dragBoundFunc用于旋转控件旁边的内容: controlGroup.setDragBoundFunc (function (pos) { var groupPos = group.getPositio
谢谢大家! 这是我做的旋转控制的概念证明: 在拖动控件时,dragBoundFunc用于旋转控件旁边的内容:
controlGroup.setDragBoundFunc (function (pos) {
var groupPos = group.getPosition()
var rotation = degrees (angle (groupPos.x, groupPos.y, pos.x, pos.y))
status.setText ('x: ' + pos.x + '; y: ' + pos.y + '; rotation: ' + rotation); layer.draw()
group.setRotationDeg (rotation); layer.draw()
return pos
})
我也在做同样的事情,我发布了一个问题,但我发现了一个链接,在那里你已经准备好了调整大小和移动工具。所以我用了同样的方法。不过,它不包含旋转工具,但这对您来说也是一个很好的开始,它非常简单且符合逻辑。以下是链接:
如果我能让旋转工具完美地工作,我也会带着它回来。我希望我发布我制作的这段代码片段不会迟到。我对你们处理这类任务也有同样的问题。在处理图像和对象时,我尝试了很多变通方法来模拟fabricjs框架的功能,这已经过去3天了。虽然我可以使用Fabricjs,但Kineticjs在处理html5时似乎更快/更一致 幸运的是,我们已经有了可以与kineticjs一起轻松实现的现有插件/工具,这就是jQuery转换工具。超级感谢这本书的作者!只需在谷歌上搜索并下载 我希望下面我创建的代码能够帮助很多开发人员解决这类任务 $(函数(){
如果您需要教程,请转到此处:;当用户拖动锚点(我猜每个角上都有一个蓝色方块)时,您真的想旋转图像吗?看起来很混乱,也许您应该允许用户在变换/缩放/旋转上下文之间进行选择(您知道blender吗?)看这把小提琴,你可以使用第五个锚来控制旋转,其他四个锚来控制缩放。使用“dragstart”和“dragend”以及“dragmove”的旋转将通过获取鼠标位置的起点和终点/当前点来计算,以计算给定图像中心的角度。其中类似于将图片放入microsoft word或powerpoint。你更新了小提琴吗?哦,我忘了HTML元素。什么现有插件?
//Declare components STAGE, LAYER and TEXT
var _stage = null;
var _layer = null;
var simpleText = null;
_stage = new Kinetic.Stage({
container: 'canvas',
width: 640,
height: 480
});
_layer = new Kinetic.Layer();
simpleText = new Kinetic.Text({
x: 60,
y: 55,
text: 'Simple Text',
fontSize: 30,
fontFamily: 'Calbiri',
draggable: false,
name:'objectInCanvas',
id:'objectCanvas',
fill: 'green'
});
//ADD LAYER AND TEXT ON STAGE
_layer.add(simpleText);
_stage.add(_layer);
_stage.draw();
//Add onclick event listener to the Stage to remove and add transform tool to the object
_stage.on('click', function(evt) {
//Remove all objects' transform tool inside the stage
removeTransformToolSelection();
// get the shape that was clicked on
ishape = evt.targetNode;
//Add and show again the transform tool to the selected object and update the stage layer
$(ishape).transformTool('show');
ishape.getParent().moveToTop();
_layer.draw();
});
function removeTransformToolSelection(){
//Search all objects inside the stage or layer who has the name of "objectInCanvas" using jQuery iterator and hide the transform tool.
$.each(_stage.find('.objectInCanvas'), function( i, child ) {
$(child).transformTool('hide');
});
}
//Event listener/Callback when selecting image using file upload element
function handleFileSelect(evt) {
//Remove all objects' transform tool inside the stage
removeTransformToolSelection();
//Create image object for selected file
var imageObj = new Image();
imageObj.onload = function() {
var myImage = new Kinetic.Image({
x: 0,
y: 0,
image: imageObj,
name:'objectInCanvas',
draggable:false,
id:'id_'
});
//Add to layer and add transform tool
_layer.add(myImage);
$(myImage).transformTool();
_layer.draw();
}
//Adding source to Image object.
var f = document.getElementById('files').files[0];
var name = f.name;
var url = window.URL;
var src = url.createObjectURL(f);
imageObj.src = src;
}
//Attach event listener to FILE element
document.getElementById('files').addEventListener('change', handleFileSelect, false);
});