我使用Kineticjs在画布上制作工具来调整大小或旋转 但是当我尝试旋转它时，工具将其拖走，图像旋转错误 小鸡我的代码的链接
http://jsfiddle.net/vipmaa/qFmsM/3/
$(document).ready(function(){
function randomInt(min,max){
return Math.floor(Math.random()*(max-(min+1))+(min+1));
}
//try to use
var stage = new Kinetic.Stage({
container: 'stage',
width: 500,
height: 450,
offsetX:30,
offsetY:30
});
function update(activeAnchor) {
var group = activeAnchor.getParent();
var RotateSign = group.get('.RotateSign')[0];
var topLeft = group.get('.topLeft')[0];
var topRight = group.get('.topRight')[0];
var bottomRight = group.get('.bottomRight')[0];
var bottomLeft = group.get('.bottomLeft')[0];
var mask = group.get('.mask')[0];
var anchorX = activeAnchor.getX();
var anchorY = activeAnchor.getY();
// update anchor positions
switch (activeAnchor.getName()) {
case 'RotateSign':
var radius = mask.getWidth() * mask.getScale().x + 55;
group.rotate(radius);
break;
case 'topLeft':
topRight.setY(anchorY);
bottomLeft.setX(anchorX);
break;
case 'topRight':
topLeft.setY(anchorY);
bottomRight.setX(anchorX);
RotateSign.setY(anchorY);
break;
case 'bottomRight':
bottomLeft.setY(anchorY);
topRight.setX(anchorX);
break;
case 'bottomLeft':
bottomRight.setY(anchorY);
topLeft.setX(anchorX);
RotateSign.setX(anchorX);
break;
}
mask.setPosition(topLeft.getPosition());
var width = topRight.getX() - topLeft.getX();
var height = bottomLeft.getY() - topLeft.getY();
if (width && height && (width > 1 && height > 1)) {
mask.setSize(width, height);
}
}
function addAnchor(group, x, y, name) {
var layer = group.getLayer();
var anchor = new Kinetic.Circle({
x: x,
y: y,
stroke: '#666',
fill: '#ddd',
strokeWidth: 2,
radius: 8,
name: name,
draggable: true,
dragOnTop: false
});
anchor.on('dragmove', function () {
update(this);
layer.draw();
});
anchor.on('mousedown touchstart', function () {
group.setDraggable(false);
this.moveToTop();
});
anchor.on('dragend', function () {
group.setDraggable(true);
layer.draw();
update(this);
});
// add hover styling
anchor.on('mouseover', function () {
var layer = this.getLayer();
document.body.style.cursor = 'pointer';
this.setStrokeWidth(4);
layer.draw();
});
anchor.on('mouseout', function () {
var layer = this.getLayer();
document.body.style.cursor = 'default';
this.setStrokeWidth(2);
layer.draw();
});
group.add(anchor);
if(name == 'topLeft'){
anchor.hide();
}
}
function init(){
var rand = Math.ceil(Math.random() * 100087600);
var id = $(this).attr('data-name')+'_'+rand;
var config = {
id : 'canvas_'+id,
draggable:true,
name: 'art'
}
var x =randomInt(0,100);
var y =randomInt(0,100);
var artGroup = new Kinetic.Group({
x: x,
y: y,
name:'Group',
draggable: true
});
var layer = new Kinetic.Layer(config);
var imageObj = new Image();
imageObj.onload = function() {
var yoda = new Kinetic.Image({
x: x,
y: y,
image: imageObj,
width: imageObj.width,
height: imageObj.height,
name: 'mask',
});
// add the shape to the layer
artGroup.add(yoda);
layer.add(artGroup);
// add the layer to the stage
stage.add(layer);
addAnchor(artGroup, x, y, 'topLeft');// it will be hide
addAnchor(artGroup, (x + imageObj.width), y, 'topRight');
addAnchor(artGroup, (x + imageObj.width), (y + imageObj.height), 'bottomRight');
addAnchor(artGroup, x, (y + imageObj.height), 'bottomLeft');
//Start add rotation tools
var sign = new Kinetic.Path({
name:'RotateSign',
x: x, y: y,
// Path from http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-path-tutorial/
data: 'M12.582,9.551C3.251,16.237,0.921,29.021,7.08,38.564l-2.36,1.689l4.893,2.262l4.893,2.262l-0.568-5.36l-0.567-5.359l-2.365,1.694c-4.657-7.375-2.83-17.185,4.352-22.33c7.451-5.338,17.817-3.625,23.156,3.824c5.337,7.449,3.625,17.813-3.821,23.152l2.857,3.988c9.617-6.893,11.827-20.277,4.935-29.896C35.591,4.87,22.204,2.658,12.582,9.551z',
scale: 0.4, fill: 'black',
offset:25,
dragOnTop: false,
draggable: true
});
sign.on('dragmove', function () {
update(this);
layer.draw();
});
sign.on('mousedown touchstart', function () {
//artGroup.setDraggable(false);
//this.moveToTop();
});
sign.on('dragend', function () {
//artGroup.setDraggable(true);
layer.draw();
update(this);
});
artGroup.add (sign);
//End add rotation tools
artGroup.on('dragstart', function () {
this.moveToTop();
});
artGroup.on('dragmove', function() {
var img = layer.get('.mask');
});
layer.on('mouseover', function () {
document.body.style.cursor = 'pointer';
});
layer.on('mouseout', function () {
document.body.style.cursor = 'default';
});
stage.draw();
};
imageObj.src = "http://www.w3schools.com/images/w3logotest2.png";
};
init();});
我想在图像中围绕图像和工具棒旋转 你能知道代码中的错误吗？
答案 0 :(得分：0)
您可以浏览以下内容，
function update(activeAnchor) {
var group = activeAnchor.getParent();
var topLeft = group.get('.topLeft')[0];
var topRight = group.get('.topRight')[0];
var bottomRight = group.get('.bottomRight')[0];
var bottomLeft = group.get('.bottomLeft')[0];
var rotateAnchor = group.get('.rotateAnchor')[0];
var image = group.get('Image')[0];
var anchorX = activeAnchor.getX();
var anchorY = activeAnchor.getY();
var imageWidth = image.getWidth();
var imageHeight = image.getHeight();
// update anchor positions
switch (activeAnchor.getName()) {
case 'rotateAnchor':
break;
case 'topLeft':
topRight.setY(anchorY);
bottomLeft.setX(anchorX);
break;
case 'topRight':
topLeft.setY(anchorY);
bottomRight.setX(anchorX);
break;
case 'bottomRight':
topRight.setX(anchorX);
bottomLeft.setY(anchorY);
break;
case 'bottomLeft':
topLeft.setX(anchorX);
bottomRight.setY(anchorY);
break;
}
if (topRight.getX() < topLeft.getX() + minImgSize) {
topRight.setX(topLeft.getX() + minImgSize);
}
if (bottomRight.getX() < topLeft.getX() + minImgSize) {
bottomRight.setX(topLeft.getX() + minImgSize);
}
if (bottomRight.getY() < topLeft.getY() + minImgSize) {
bottomRight.setY(topLeft.getY() + minImgSize);
}
if (bottomLeft.getY() < topLeft.getY() + minImgSize) {
bottomLeft.setY(topLeft.getY() + minImgSize);
}
var width = topRight.getX() - topLeft.getX();
var height = bottomLeft.getY() - topLeft.getY();
image.setPosition({
x: topLeft.getPosition().x,
y: (topLeft.getPosition().y)
});
image.setWidth(width);
image.setHeight(height);
rotateAnchor.setX(width / 2 + topLeft.getX());
rotateAnchor.setY(height / 2 + topLeft.getY());
}
function addAnchor(group, x, y, name, dragBound) {
var stage = group.getStage();
var layer = group.getLayer();
var groupPos = group.getPosition();
var anchor = new Kinetic.Circle({
x: x,
y: y,
stroke: '#666',
fill: '#ddd',
strokeWidth: 2,
radius: 6,
//name: name,
id :"anchor",
name:name,
draggable: true,
dragOnTop: false
});
if (dragBound == 'rotate') {
startAngle = angle(groupPos.x, groupPos.y, x + groupPos.x, y + groupPos.y);
anchor.setAttrs({
dragBoundFunc: function (pos) {
return getRotatingAnchorBounds(pos, group);
}
});
}
anchor.on('dragmove', function () {
update(this);
stage.draw();
});
anchor.on('mousedown touchstart', function () {
group.setDraggable(false);
this.moveToTop();
});
anchor.on('dragend', function () {
group.setDraggable(true);
stage.draw();
});
// add hover styling
anchor.on('mouseover', function () {
var layer = this.getLayer();
document.body.style.cursor = 'pointer';
this.setStrokeWidth(4);
stage.draw();
});
anchor.on('mouseout', function () {
var layer = this.getLayer();
document.body.style.cursor = 'default';
this.setStrokeWidth(2);
stage.draw();
});
group.add(anchor);
}
function loadImages(sources, callback) {
var images = {};
var loadedImages = 0;
var numImages = 0;
for(var src in sources) {
numImages++;
}
for(var src in sources) {
images[src] = new Image();
images[src].onload = function() {
if(++loadedImages >= numImages) {
callback(images);
}
};
images[src].src = sources[src];
}
}
function radians(degrees) {
return degrees * (Math.PI / 180)
}
function degrees(radians) {
return radians * (180 / Math.PI)
}
function angle(cx, cy, px, py) {
var x = cx - px;
var y = cy - py;
return Math.atan2(-y, -x)
}
function distance(p1x, p1y, p2x, p2y) {
return Math.sqrt(Math.pow((p2x - p1x), 2) + Math.pow((p2y - p1y), 2))
}
function getRotatingAnchorBounds(pos, group) {
var groupPos = group.getPosition();
var rotation = degrees(angle(groupPos.x, groupPos.y, pos.x, pos.y) - startAngle);
var dis = distance(groupPos.x, groupPos.y, pos.x, pos.y);
console.log('x: ' + pos.x + '; y: ' + pos.y + '; rotation: ' + rotation + '; distance:' + dis);
group.setRotationDeg(rotation);
return pos;
}
function initStage(images) {
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 400
});
var darthVaderGroup = new Kinetic.Group({
x: 270,
y: 100,
draggable: true
});
var yodaGroup = new Kinetic.Group({
x: 100,
y: 110,
draggable: true
});
var layer = new Kinetic.Layer();
/*
* go ahead and add the groups
* to the layer and the layer to the
* stage so that the groups have knowledge
* of its layer and stage
*/
layer.add(darthVaderGroup);
layer.add(yodaGroup);
stage.add(layer);
// darth vader
var darthVaderImg = new Kinetic.Image({
x: 0,
y: 0,
image: images.darthVader,
width: 200,
height: 138,
name: 'image'
});
darthVaderGroup.add(darthVaderImg);
addAnchor(darthVaderGroup, 0, 0, 'topLeft', 'none');
addAnchor(darthVaderGroup, darthVaderImg.getWidth(), 0, 'topRight', 'none');
addAnchor(darthVaderGroup, darthVaderImg.getWidth(), darthVaderImg.getHeight(), 'bottomRight', 'none');
addAnchor(darthVaderGroup, 0, darthVaderImg.getHeight(), 'bottomLeft', 'none');
addAnchor(darthVaderGroup, darthVaderImg.getWidth() / 2, darthVaderImg.getHeight() / 2, 'rotateAnchor', 'rotate');
darthVaderGroup.on('dragstart', function() {
this.moveToTop();
});
stage.draw();
}
var sources = {
darthVader: 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg'
};
loadImages(sources, initStage);
检查http://jsfiddle.net/Qnil/XR7vL/ KineticJS最适合处理旋转图像和东西。
答案 1 :(得分：0)