我正在尝试使用 ClipPath
剪裁带圆圈的线,并通过拖动成功完成。这是我的工作代码;
function clipData(svg, cx, cy) {
var clip = svg.append("defs")
.append("clipPath") // define a clip path
.attr("id", "clip") // give the clipPath an ID
.append("circle") // shape it as an ellipse
.attr("id", "my-circle")
.attr("cx", 100) // position the x-centre
.attr("cy", 80) // position the y-centre
.attr("r", 80) // set the x radius
.attr("fill", "yellow")
svg.append("circle") // shape it as an ellipse
.attr("cx", 100) // position the x-centre
.attr("cy", 80) // position the y-centre
.attr("r", 80) // set the x radius
.attr("fill", "red")
var g = svg.append("g")
.datum({
x: 0,
y: 0
})
.attr("id", "child")
//.attr("transform", function(d) { return 'translate(' + d.x + ' '+ d.y + ')'; })
.call(d3.drag()
.on("start", function(d) {
d3.select(this).raise().classed("active", true);
})
.on("drag", function(d) {
d3.select(this).attr("transform", "translate(" + (d3.event.x) + "," + (d3.event.y) + ")");
d3.select("#svgGreen").selectAll("*").remove();
clipData(svg, d3.event.x + cx, d3.event.y + cy);
})
.on("end", function(d) {
d3.select(this).classed("active", false);
}));
g.append("line")
.attr("clip-path", "url(#clip)")
.attr("x1", cx)
.attr("y1", cy)
.attr("x2", cx + 100)
.attr("y2", cy + 100)
.style("stroke", "purple")
.style("stroke-width", 12)
}
var svg = d3.select("#svgGreen");
var cx = 100,
cy = 80,
x = 0,
y = 0;
clipData(svg, cx, cy);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" className="clip-path" id="svgGreen">
</svg>
现在我试图在剪裁后获取 线的可见部分的长度
。但是当我尝试从线的 x-y 点获取它时,我总是得到与剪裁前相同的长度,
Is there any way that I can get only visible Line length after clipping??
最佳答案
根据 MDN
A clipping path is conceptually equivalent to a custom viewport for the referencing element. Thus, it affects the rendering of an element, but not the element's inherent geometry: the bounding box of a clipped element (meaning, an element which references a element via a clip-path property, or a child of the referencing element) must remain the same as if it were not clipped.
因此无论是否裁剪,此元素的大小始终保持不变。我认为您应该考虑使用另一种方法来满足您的需求。
关于javascript - 获取裁剪线可见区域长度 d3,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57987873/