- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在 SVG 中有 rect
和 line
元素。我想使用 jQueryUI 在 rect
内水平拖动一条线。我正在尝试关注 this示例。
这是我的 SVG
<svg width="400" height="110" >
<rect width="300" height="100" style="fill:none;stroke-width:3;stroke:rgb(0,0,0)" id="containment-wrapper"/>
<line x1="150" id="draggable" y1="0" x2="150" y2="100" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>
代码
$(function() {
$( "#draggable" ).draggable({ containment: "#containment-wrapper",
scroll: false });
});
但它没有按预期工作,线根本没有移动。
更新
我尝试使用动态线元素,它没有按预期工作。
SVG:
<g id="grp">
<rect x="488.5" y="380.3"
width="76.7" height="38.5" id="rct1" style="pointer-
events:inherit">
</rect>
<text transform="matrix(1 0 0 1 515.272
402.9645)" id="txt1" style="pointer-
events:inherit">Check</text>
</g>
代码:
Bbox = document.getElementById(rct1).getBBox();
line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
line.setAttributeNS(null, "id", "line_1");
line.setAttributeNS(null, "x1", Bbox.x + Bbox.width / 2);
line.setAttributeNS(null, "x2", Bbox.x + Bbox.width / 2);
line.setAttributeNS(null, "y1", Bbox.y);
line.setAttributeNS(null, "y2", Bbox.y2);
line.setAttributeNS(null, "fill", "none");
line.setAttributeNS(null, "fill-opacity", "1");
line.setAttributeNS(null, "stroke", "red");
line.setAttributeNS(null, "stroke-width", "2");
line.setAttributeNS(null, "stroke-opacity", "1");
line.setAttributeNS(null, "style", "pointer-events: inherit");
document.getElementById(grp).appendChild(line);
$("#grp").draggable("disable");
$("#rct1").draggable("disable");
$("#line_1").draggable({
stack: "#line_1"
drag: function (event, ui) {
var newPos = (ui.position.left > Bbox.x) ? Bbox.x + 1 : ui.position.left;
event.target.setAttributeNS(null, "x1", newPos);
event.target.setAttributeNS(null, "x2", newPos);
}
});
我禁用了 g 和 rect,但后来到它的可拖动,我需要它被禁用。并且线被拖到右 Angular 。我将矩形的 x 作为 newpos 传递。还有一种方法可以使行保持默认选中状态吗?
最佳答案
您可以简单地更新 x1 and x2您在 drag event 上的行的属性:
$("#draggable1").draggable({
drag: function(event, ui) {
var newPos = (ui.position.left > 300) ? 300 : ui.position.left;
event.target.setAttributeNS(null, "x1", newPos);
event.target.setAttributeNS(null, "x2", newPos);
}
});
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<svg width="400" height="110">
<rect width="300" height="100" style="fill:none;stroke-width:3;stroke:rgb(0,0,0)" id="containment-wrapper"/>
<line x1="150" id="draggable1" y1="0" x2="150" y2="100"
style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>
关于javascript - 如何在 Javascript 或 JqueryUI 中将 <line> 拖到 <rect> 内?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53923070/
好的,所以我有一个自定义的 rect 函数。自定义rect如下: typedef struct tagRECTEx{ // long left; // long top; // long right;
我在 Rectangles 上找到了这个很棒的数学运算文件: https://gist.github.com/Noitidart/90ea1ebd30156df9ef530c6a9a1b6ea7 及其
在我的 onDraw 中,我拥有构建整个 View 所需的所有代码,但我如何检测我是否只想执行部分重绘。我想应该通过调用 canvas.invalidate(Rect rect); 来触发部分重绘。正
我对以下游戏 map 有疑问: 我想把所有的陆地区域(黄色附近)保存在一个数组中,这样计算机以后就知道用户的点击是在水面上(鼠标指针的x/y坐标不在数组中)还是在国内(x/y 坐标光标不在数组中)。我
我尝试制作一个简单的可视化列,其中矩形的高度由比例确定: var heightScale = d3.scaleLinear() .domain([150,2500]) .range([
我在 WPF 中有一个小项目,我需要在其中交换 UIElement。类似于 iGoogle 的功能。 由于我发不了图片(信誉不够)我会用文字说明。我有一个这样定义的 3x3 网格: 0 1
这个问题已经有答案了: How do I detect collision in pygame? (5 个回答) 已关闭 6 个月前。 问候, 我在 pygame 中从事的项目似乎遇到了一些麻烦。对于
我正在使用: check = pygame.image.load("check.png") checkrect = check.get_rect() checkrect = checkrect.mov
我试图让我的玩家 rect 在侧面和底部与我的敌人 rect 碰撞,因此玩家 rect 不会抛出敌人的 rect 但我不知道为什么它一直将我传送到它根本不起作用 VIDEo platform.rec
这个问题已经有答案了: How do I get the snake to grow and chain the movement of the snake's body? (1 个回答) 已关闭 3
API 是否应该提供 Rect::contains(Point) 或 Point::is_inside(Rect) 或两者? 或 Math::contains(Point, Rect) 因为它是对称的
我在我的项目中使用 Konva.js,我特别需要在使用 Konva.Rect() 类定义的可拖动矩形内定义文本。有没有一种方法可以在不使用单独的 Konva.Text 的情况下实现这一点() 或 Ko
'annot' CGPDFDictionary 'Rect' 如何转换为 objective-c Rect: 最佳答案 Adobes PDF Spec状态: Rectangles are used t
我正在尝试在 UIView 中绘制一个字符串。 class ViewController: UIViewController { override func viewDidLoad() { s
我正在使用 D3 制作图表。我希望用户能够通过调整单列水平柱形图上堆叠条形的大小来输入他们的选择。 条形堆叠在一起,每个条形都有 .call(drag) 事件监听器。 此拖动事件返回错误。 var d
我刚刚在官方文档中浏览了 pygame 的 .rect 方法。 我们有2个案例, pygame.rect.move(arg1,arg2) 用于在屏幕上移动 .rect 对象 和 pygame.rect
所以我尝试使用实例为我的游戏进行碰撞检测。代码如下: class Paddle: def __init__(self, x, y, width, height, rect): self.x =
我是否正确使用了drawPixmap()? 本质上,我的目标是拍摄一张图 block 图像,然后用自定义图 block 图像替换单个图 block 。 我能够将两个图像都加载到屏幕上,但是当我调用 d
这个想法很简单:我有一个 SVG 路径和一个 Rect,我需要让路径穿过矩形,由此产生的“洞”应该是透明的。 这是 jsfiddle,其中包含一份它现在的样子: https://jsfiddle.ne
很抱歉问了一个菜鸟问题,但是有人能告诉我这两者之间的区别吗 cv:: Rect rect; int width = rect.width; int height = rect.height; 还有这个
我是一名优秀的程序员,十分优秀!