是否可以在svg矩形中设置负宽度?
我想根据鼠标移动来移动矩形。请参考下面的链接 在mousedown事件中获取矩形的起始位置并开始拖动,它将在mouse move事件中创建矩形。但当我移动到上一个值时(即移动到小于鼠标按下值意味着它将返回负值),所以宽度变为负值 上面的链接是画布矩形。但是我用同样的逻辑创建了svg矩形 不支持矩形的负宽度?或者如何基于鼠标移动来移动矩形 出什么事了 我的代码片段是否可以在svg矩形中设置负宽度?,svg,jquery-svg,rect,Svg,Jquery Svg,Rect,我想根据鼠标移动来移动矩形。请参考下面的链接 在mousedown事件中获取矩形的起始位置并开始拖动,它将在mouse move事件中创建矩形。但当我移动到上一个值时(即移动到小于鼠标按下值意味着它将返回负值),所以宽度变为负值 上面的链接是画布矩形。但是我用同样的逻辑创建了svg矩形 不支持矩形的负宽度?或者如何基于鼠标移动来移动矩形 出什么事了 我的代码片段 ChartMouseDown:function(e){ // e = this.normalizeMouseEvent
ChartMouseDown:function(e){
// e = this.normalizeMouseEvent(e);
var mousedownCords=this.calMousePosition(e);
this.mouseDownX=mousedownCords.X;
this.mouseDownY=mousedownCords.Y;
this.chartMouseDownPoint= this.GetValuebyPoint(Math.abs(this.mouseDownX-this.model.m_AreaBounds.X),Math.abs(this.mouseDownY-(this.model.m_AreaBounds.Y + this.model.m_AreaBounds.Height)));
this.zoomingX=true;
},
ChartMouseMove: function (evt) {
if( this.zoomingX)
{
var mouseMoveX,mouseMoveY;
var mouseMoveCords=this.calMousePosition(evt);
mouseMoveX=mouseMoveCords.X;
mouseMoveY=mouseMoveCords.Y;
$(this.ZoomAreaRect).remove();
var width = Math.abs(mouseMoveX - this.mouseDownX);
var height = mouseMoveY - this.mouseDownY;
var x;
if(mouseMoveX > this.mouseDownX)
x= this.mouseDownX;
else
x= mouseMoveX;
this.ZoomAreaRect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
$(this.ZoomAreaRect).attr({
'id': 'ZoomArea', 'x': x, 'y': this.model.m_AreaBounds.Y, 'width': width, 'height': this.model.m_AreaBounds.Height,
'fill': 'gray', 'stroke-width': 1, 'stroke':'gray'
});
$(this.ZoomAreaRect).appendTo(this.SvgObject);
}
calMousePosition:function(e)
{
var matched = jQuery.uaMatch( navigator.userAgent );
var browser = {};
var mouseX,mouseY;
if(matched.browser.toLowerCase()=="mozilla")
{
mouseX = (e.pageX)- $(this.SvgObject).parent().offset().left;
mouseY= (e.pageY) - $(this.SvgObject).parent().offset().top;
}
else
{
mouseX = (e.pageX +document.documentElement.scrollLeft)-$(this.SvgObject).offset().left;
mouseY = (e.pageY + document.documentElement.scrollTop) - $(this.SvgObject).offset().top;
}
return { X: mouseX, Y:mouseY};
},
谢谢
湿婆
如果要在SVG中实现这一点,必须确保矩形的宽度/高度始终为正,并相应地计算x/y。如果有两个坐标数组开始和结束,其中
(开始[0],开始[1])
为左上角(或右下角)和(结束[0],结束[1])
为左上角(或右下角)这是一个绘制矩形的算法,它不关心这些坐标是否被切换
<rect
fill="rgba(255,0,0,0.3)"
x={Math.min(start[0], end[0])}
y={Math.min(start[1], end[1])}
width={Math.abs(start[0] - end[0])}
height={Math.abs(start[1] - end[1])}
/>
现在的问题是,我们如何使用SVG实现同样的效果?@JSmith您可以随时提出另一个问题,但如果您仔细思考,这应该是非常明显的。我只找到了一个复杂的解决方案。虽然会有一个更容易的。干杯