Raphael SVG 沿水平直线移动对象
Raphael SVG move object along straight horizontal line
我想沿着水平线路径移动绿色按钮,但绿色按钮没有跟随我的鼠标。拖动时如何使绿色按钮跟随我的鼠标?
代码:
<script>
var pdefs = {
horizontalLine: {
path: [
['M',50,240],
['l',640,0]
],
transform: 'r0'
}
},
useDef = 'wiggles';
function run()
{
var paper = Raphael( $('.wrapper')[0], 600, 600 ),
path = paper.path( Raphael.transformPath(pdefs['horizontalLine'].path, pdefs['horizontalLine'].transform) )
.attr( 'stroke-width', 10 )
.attr( 'stroke', 'rgb(80,80,80)' ),
knob = paper.ellipse( 0, 0, 25, 15 )
.attr( 'fill', 'lime' )
.attr( 'stroke', 'rgba(80,80,80,0.5)' ),
$shim = $('<div>')
.css( {position: 'absolute', width: 50, height: 50 } )
.appendTo( $('.wrapper') ),
len = path.getTotalLength(),
bb = path.getBBox(),
mid = {x: bb.x+bb.width/2, y: bb.y+bb.height/2},
pal = path.getPointAtLength(0);
knob.translate(pal.x,pal.y).rotate(pal.alpha);
$shim.css({ left: pal.x-5, top: pal.y-5 });
$shim.draggable({
drag: function ( e, ui ) {
// Find lines and then angle to determine
// percentage around an imaginary circle.
var t = ( Raphael.angle( ui.position.left-25, ui.position.top-25, mid.x, mid.y ) ) /360;
// Using t, find a point along the path
pal = path.getPointAtLength( (t * len) % len );
// Move the knob to the new point
knob.transform( 't' + [pal.x, pal.y] + 'r' + pal.alpha );
},
stop: function ( e, ui ) {
$shim.css({ left: pal.x-25, top: pal.y-25 });
}
});
}
run();
</script>
您的 drag
功能看起来像是某个不同小部件的遗留物(也许是圆形旋钮?)。
而不是:
drag: function ( e, ui ) {
// Find lines and then angle to determine
// percentage around an imaginary circle.
var t = ( Raphael.angle( ui.position.left-25, ui.position.top-25, mid.x, mid.y ) ) /360;
// Using t, find a point along the path
pal = path.getPointAtLength( (t * len) % len );
// Move the knob to the new point
knob.transform( 't' + [pal.x, pal.y] + 'r' + pal.alpha );
}
尝试:
drag: function ( e, ui ) {
var t = ui.position.left - 50;
// Using t, find a point along the path
pal = path.getPointAtLength( Math.max(t, 0) );
// Move the knob to the new point
knob.transform( 't' + [pal.x, pal.y] + 'r' + pal.alpha );
}
我想沿着水平线路径移动绿色按钮,但绿色按钮没有跟随我的鼠标。拖动时如何使绿色按钮跟随我的鼠标? 代码:
<script>
var pdefs = {
horizontalLine: {
path: [
['M',50,240],
['l',640,0]
],
transform: 'r0'
}
},
useDef = 'wiggles';
function run()
{
var paper = Raphael( $('.wrapper')[0], 600, 600 ),
path = paper.path( Raphael.transformPath(pdefs['horizontalLine'].path, pdefs['horizontalLine'].transform) )
.attr( 'stroke-width', 10 )
.attr( 'stroke', 'rgb(80,80,80)' ),
knob = paper.ellipse( 0, 0, 25, 15 )
.attr( 'fill', 'lime' )
.attr( 'stroke', 'rgba(80,80,80,0.5)' ),
$shim = $('<div>')
.css( {position: 'absolute', width: 50, height: 50 } )
.appendTo( $('.wrapper') ),
len = path.getTotalLength(),
bb = path.getBBox(),
mid = {x: bb.x+bb.width/2, y: bb.y+bb.height/2},
pal = path.getPointAtLength(0);
knob.translate(pal.x,pal.y).rotate(pal.alpha);
$shim.css({ left: pal.x-5, top: pal.y-5 });
$shim.draggable({
drag: function ( e, ui ) {
// Find lines and then angle to determine
// percentage around an imaginary circle.
var t = ( Raphael.angle( ui.position.left-25, ui.position.top-25, mid.x, mid.y ) ) /360;
// Using t, find a point along the path
pal = path.getPointAtLength( (t * len) % len );
// Move the knob to the new point
knob.transform( 't' + [pal.x, pal.y] + 'r' + pal.alpha );
},
stop: function ( e, ui ) {
$shim.css({ left: pal.x-25, top: pal.y-25 });
}
});
}
run();
</script>
您的 drag
功能看起来像是某个不同小部件的遗留物(也许是圆形旋钮?)。
而不是:
drag: function ( e, ui ) {
// Find lines and then angle to determine
// percentage around an imaginary circle.
var t = ( Raphael.angle( ui.position.left-25, ui.position.top-25, mid.x, mid.y ) ) /360;
// Using t, find a point along the path
pal = path.getPointAtLength( (t * len) % len );
// Move the knob to the new point
knob.transform( 't' + [pal.x, pal.y] + 'r' + pal.alpha );
}
尝试:
drag: function ( e, ui ) {
var t = ui.position.left - 50;
// Using t, find a point along the path
pal = path.getPointAtLength( Math.max(t, 0) );
// Move the knob to the new point
knob.transform( 't' + [pal.x, pal.y] + 'r' + pal.alpha );
}