我正在尝试创建一个矩形,我可以使用位于矩形顶部的处理程序(小圆圈)调整其大小和旋转。与大多数绘图工具类似,允许我们调整形状的大小和旋转。
我在矩形顶部添加了三个圆圈。一个圆圈用于调整矩形的宽度(右侧圆圈)。另一个圆圈用于调整矩形的高度(顶部圆圈)。调整矩形的大小效果完美。
我在矩形顶部添加了三个圆圈。一个圆圈用于调整矩形的宽度(右侧圆圈)。另一个圆圈用于调整矩形的高度(顶部圆圈)。调整矩形的大小效果完美。
margin = {top: 40, right: 20, bottom: 30, left: 70},
width = 600 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
var svg = d3.select('#canvas').attr("width",width).attr("height",height);
gContainer = svg.append('g')
.attr("class", "gContainer")
.attr("transform", function(d,i){
return "translate("+300+","+200+")"
})
gBars = gContainer.append('g').attr("class", "gBar");
gBars.append("rect")
.attr("class", "Bar")
.attr("fill","black")
.attr("width", 40)
.attr("height", function(d) { return height - 200})
.style("opacity", 0.5);
var handlerRadius = 3.5;
handlerPointsPosition=[];
elementWidth = Number(d3.select(".Bar").attr("width"));
elementHeight = Number(d3.select(".Bar").attr("height"));
x0 = 0 + (elementWidth/2) ;
y0 = 0 ;
x1 = 0 + (elementWidth);
y1 = 0 +(elementHeight/2) ;
x2= 0 + (elementWidth/2) ;
y2= -20;
handlerPointsPosition = [[x0,y0],[x1,y1],[x2,y2]];
var rectangleHandlers = d3.behavior.drag()
.origin(function(d) { return d; })
.on("dragstart", dragstarted)
.on("drag", dragged)
gHandlerPoints= gContainer.selectAll("g.HandlerPoint")
.data(handlerPointsPosition)
.enter().append('g')
.attr("class", "gHandlerPoint")
.attr("id", function(d,i){return "gHandlerPoint_id_"+i;})
.attr("transform", function(d,i){
//console.log(d);
return "translate("+d[0]+","+d[1]+")"
})
.call(rectangleHandlers);
gHandlerPoints.append("circle")
.attr("class", "handlerPoint")
.style("fill", "white")
.style("stroke", "blue")
.attr("stroke","")
.attr("r",function(d,i){return (i == 2 ? 4: 3.5);})
.attr("id", function(d,i){return "HandlerPointId_"+i;})
gContainer.append("line")
.attr("class","handlerLine")
.attr("x1", (elementWidth/2) )
.attr("y1", 0- handlerRadius)
.attr("x2", (elementWidth/2) )
.attr("y2", -20 + handlerRadius)
.attr("stroke-width", 1)
.attr("stroke", "blue");
function updateHandlerPosition(id, dX, dY)
{
d3.select(id).attr("transform", function(d,i){
return "translate(" + [ dX, dY] + ")"
})
}
function dragstarted(d,i) {
dragIconX = d3.transform(d3.select(this).attr("transform")).translate[0];
dragIconY = d3.transform(d3.select(this).attr("transform")).translate[1];
barStartWidth = d3.select(".Bar").attr("width");
}
function dragged(d,i) {
barHeight = d3.select(".Bar").attr("height");
if(i == 0) // circle on the top edge of the bar
{
dragIconY = dragIconY + d3.mouse(this)[1];
updateHandlerPosition("#gHandlerPoint_id_"+i, dragIconX, dragIconY );
updateHandlerPosition("#gHandlerPoint_id_1", (barStartWidth), (barHeight/2) );
var x = d3.transform(d3.select(".gContainer").attr("transform")).translate[0];
var y = d3.transform(d3.select(".gContainer").attr("transform")).translate[1];
d3.select(".gContainer").attr("transform", function(d,i){
y = y + dragIconY;
return "translate(" + [ x , y] + ")"
})
console.log(height, barHeight, barHeight - Number(dragIconY));
d3.select(".Bar").attr("height", barHeight - Number(dragIconY));
}
else if (i==1) // circle on the right side of the bar
{
oldMouseX = dragIconX;
dragIconX = d3.mouse(this)[0]+dragIconX;
barWidth = dragIconX;
updateHandlerPosition("#gHandlerPoint_id_"+i, dragIconX, dragIconY );
updateHandlerPosition("#gHandlerPoint_id_0", (barWidth/2), 0 );
updateHandlerPosition("#gHandlerPoint_id_2", (barWidth/2), -20);
d3.select(".handlerLine").attr("x1",(barWidth/2)).attr("x2", (barWidth/2));
d3.select(".Bar").attr("width", Math.abs(dragIconX));
}
else if(i==3) //circle on very top
{
// code for rotation should come here.
}
}
链接至 jsFiddle:http://jsfiddle.net/Q5Jag/2103/
我在第三个圆圈上添加了旋转功能(也就是最上面的那个圆圈)。但是,我不知道如何修复旋转问题。我希望当我拖动最上面的圆圈时,矩形能够旋转。同时,我还希望在旋转时能够相应地调整圆圈的大小。
有什么想法吗?