[英]Rotate a rectangle on dragging event D3
大家好,我正在嘗試旋轉一個矩形,同時用戶用鼠標拖動它。 矩形遵循圓形曲線。 下面我附上我的解決方案,它是完美的,但是鼠標始終位於矩形的左上角。 我希望鼠標在拖動過程中始終位於矩形的中心。 我該如何控制?
解:
var drag = d3.drag().on("drag", function () {
var rect = d3.select(this);
var theta = Math.atan2(d3.event.y - height/2, d3.event.x - width/2) * 180 / Math.PI
rect
.attr("x", d3.event.x)
.attr("y", d3.event.y)
.attr('transform', `rotate(${theta + 90}, ${d3.event.x}, ${d3.event.y})`)
})
您可以在這里查看我的解決方案的完整代碼: https : //jsfiddle.net/hsspve49/
將拖動處理程序中的x和y屬性偏移矩形的大小,例如:
...
.attr("x", d3.event.x - 15) // half the width
.attr("y", d3.event.y - 35) // half the height
...
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.