Raphael.jsのドラッグメソッドを使用してイメージのサイズを変更しようとしていますが、私は奇妙な動作をしています。ここでRaphael.jsスケールでスケールが変わると、奇妙なジャンプ動作が発生する
はjsfiddleです：http://jsfiddle.net/charleshimmer/5pdyy/1/
画像のサイズを変更するには右または右下隅を使用してください。スケールメソッドを使用して飛び越しながらスキップすると、いくつかの奇妙な動作が表示されます。誰にも何の理由がありますか？
イメージの幅と高さを更新することでスムージングのサイズを変更できますが、縦横比はオフになっています。 image.scaleを使用すると、アスペクト比は維持されますが、それはすべての場所にジャンプします。
HTML
<html>
<head>
<title>Photo Test</title>
</head>
<body>
<div id="editor"></div>
<img id="image"
src="http://www.pyrblu.com/assets/launchpad_resources/demo.jpg"
style="display:none"
>
</body>
</html>
CSS
svg
{
border: 1px solid red;
background:#fff;
border-radius: 45px;
}
はJavaScript
var Editor = {},
ctFactor = 7;
// create Raphael canvas
Editor.paper = Raphael('editor', 582, 514.8);
// wait for image to load
$("#image").load(function(){
Editor.image = Editor.paper.image("http://www.pyrblu.com/assets/launchpad_resources/demo.jpg", 25, 25, 282, 465.2);
Editor.image.drag(Editor.dragging, Editor.dragStart, Editor.dragEnd);
Editor.image.ready = true;
Editor.image.mousemove(function (e) {
// only do this if the user isn't currently moving/resizing image
if(! this.ready){
return;
}
var side = Editor.sideDection(e, this);
// if the user's mouse is along the edge we want resize
if(side){
Editor.image.state = 'resizable';
}
// else it's towards the middle and we want to move
else{
Editor.image.state = 'movable';
}
var cursor = (side) ? side + '-resize' : 'move';
this.attr('cursor', cursor);
});
});
Editor.sideDection = function(event, ct){
// check north side
var directions = {
n: Math.abs(event.offsetY - ct.attr('y')) <= ctFactor,
s: Math.abs(event.offsetY - (ct.attr('height') + ct.attr('y'))) <= ctFactor,
e: Math.abs(event.offsetX - (ct.attr('width') + ct.attr('x'))) <= ctFactor,
w: Math.abs(event.offsetX - ct.attr('x')) <= ctFactor
},
side = '';
// loop through all 4 sides and concate the ones that are true
for(var key in directions) {
if(directions.hasOwnProperty(key)){
if(directions[key]){
side = side + key;
}
}
}
return side;
};
Editor.dragStart = function() {
console.log('at start');
// grab original x, y coords
this.ox = this.attr("x");
this.oy = this.attr("y");
// toggle user is doing something
// so other actions are blocked
this.ready = false;
this.animate({opacity: .65}, 500, ">");
};
Editor.dragging = function (dx, dy, x, y, e) {
console.log('at dragging');
if(this.state === 'movable'){
// this does the actual moving of the object
this.attr({x: this.ox + dx, y: this.oy + dy});
}
// we are resizing then
else{
var diff = (x - this.ox) - this.attr('width'),
xratio = 1 + diff/this.attr('width'),
yratio = 1 + diff/this.attr('height');
console.log('diff: ', diff, 'xratio: ', xratio, 'yratio: ', yratio);
//resize image, update both height and width to keep aspect ratio
// this.attr({
// 'width': this.attr('width') * xratio,
// 'height': this.attr('height') * yratio
// });
this.scale(xratio, xratio, 0, 0);
//console.log('h: ', this.attr('height'), 'w: ', this.attr('width'), 'r', this.attr('width')/this.attr('height'));
}
};
Editor.dragEnd = function() {
this.ready = true;
this.animate({opacity: 1}, 500, ">");
};
だから私はそれが働くんです。私はちょうど高さ/幅を使用して画像の比率を計算する必要があり、ピクセルの変化からは外れません。私はまだイメージのサイズを変更するイメージのサイズを変更する必要がありますが、誰かが必要とする場合に備えてjsfiddleリンクを更新して作業コードを反映しています。 – chuckles
問題を解決できた場合は、コメントを残すのではなく、自分の質問に答えてください。そうすれば、他の人にはもっと便利になる – musefan
あなたの質問は現在、「svg」と「raphael」タグの未回答リストの先頭にあります。あなた自身の質問に答えて、それを受け入れてください、ありがとう。 –