在Javascript中使用相同的函数绘制矩形和正方形
Drawing rectangle and square using same function in Javascript
我想在程序中使用相同的var rectangle
绘制矩形和正方形。我已经修改了绘制正方形的函数,给了modeOptions = { "Rectangle", "Square" }
下面需要添加的内容来同时处理矩形和正方形。请提出建议。感谢
也可以在以下位置查看问题:http://jsfiddle.net/farey/qP3kV/6/
var rectangle=(function() {
var inDrag=false,downPos,upPos;
var obj;
// temporary length for square
var temp;
return {
fillStyle: "none",
strokeStyle: "blue",
lineWidth: 5,
construct: function(pos,parent) {
obj=Object.create(parent);
obj.minx=obj.maxx=pos.x;
obj.miny=obj.maxy=pos.y;
if (fillColor!="inherit")
obj.fillStyle=fillColor;
if (strokeColor!="inherit")
obj.strokeStyle=strokeColor;
if (strokeThickness!="inherit")
obj.lineWidth=strokeThickness;
},
draw: function(selected) {
ctx.beginPath();
ctx.fillStyle=this.fillStyle;
ctx.strokeStyle=(selected) ?
"gray" : this.strokeStyle;
ctx.lineWidth=this.lineWidth;
// making 3rd & fourth argument same for square. greater of maxx and maxy should be there
if (this.maxx - this.minx > this.maxy - this.miny)
{ temp = this.maxx - this.minx
}
else
temp = this.maxy - this.miny
ctx.rect(this.minx,this.miny,temp,temp);
// else
// ctx.rect(this.minx,this.miny,this.maxx - this.minx,this.maxy - this.miny )
ctx.fill();
if (selected) {
ctx.moveTo(this.minx,this.miny);
ctx.lineTo(this.maxx,this.maxy);
ctx.moveTo(this.minx,this.maxy);
ctx.lineTo(this.maxx,this.miny);
}
ctx.stroke();
},
mousedown: function(event) {
downPos=event;
rectangle.construct(downPos,drawObject[containingBox4point(downPos)]);
inDrag=true;
},
mousemove: function(event) {
if (!inDrag)
{
drawPrevious();
drawCursor(event,containingBox4point(event));
return;
}
upPos=event;
if (upPos.x>downPos.x) {
obj.minx=downPos.x;
obj.maxx=upPos.x;
}
else {
obj.minx=upPos.x;
obj.maxx=downPos.x;
}
if (upPos.y>downPos.y) {
obj.miny=downPos.y;
obj.maxy=upPos.y;
}
else {
obj.miny=upPos.y;
obj.maxy=downPos.y;
}
drawPrevious();
obj.draw(containingBox(obj)==(-1));
drawCursor(event,containingBox4point(upPos));
},
mouseup: function(event) {
// commit rectangle
rectangle.mousemove(event);
if (!inDrag)
return;
if (containingBox(obj)==(-1))
trace("U and ur box are evil . . .");
else
{
drawObject.push(obj);
trace("Rectangle props for new box "+String(drawObject.length-1)+
": filled with "+ fillColor+
" stroked with "+strokeColor+
" @ thickness "+ strokeThickness);
}
inDrag=false;
drawPrevious();
},
mouseout: function(event) {
inDrag=false;
drawPrevious();
}
};
})(); // rectangle
要强制生成的矩形仅为正方形,需要修改矩形鼠标移动方法。
修改将强制执行这一点:
Math.abs(obj.maxx-obj.minx) == Math.abs(obj.maxy-obj.miny).
由您决定如何执行该结果
例如,假设upPos从downPos:向右和向下
你可以让水平长度获胜:
obj.maxy = obj.miny+(obj.maxx-obj.minx);
你可以让垂直长度获胜:
obj.maxx = obj.minx+(obj.maxy-obj.miny);
你甚至可以让minx/miny浮动来创建一个正方形:
obj.minx = obj.maxx – (obj.maxy-obj.miny);
// or
obj.miny= obj.maxy – (obj.maxx-obj.minx);
相关文章:
- 我可以将javascript绘制函数更改为图像吗
- 如何使用按钮来调用在画布中绘制的函数
- Javascript setInterval()函数在绘制到画布时不起作用
- 如何确保包含多个$.ajax调用的函数完全同步运行,并允许在执行时重新绘制浏览器
- 如何将数据从表单传递到 php 函数到 javascript 以在画布上绘制而不刷新页面
- 我在 JavaScript 中的函数 initCanvas() 正在绘制矩形,但不在正确的位置
- 画布绘制图像函数在画布后插入 img
- 用于在画布上绘制的 JavaScript 函数(从 aspx 页面调用)会导致错误
- 如何将数据从struts2发送到javascript函数以绘制图表
- D3:在1张图中绘制3个csv,每个图都有一个函数,但有2个csv;不起作用
- 通过函数刷新/重新绘制数据表
- 在Javascript中使用相同的函数绘制矩形和正方形
- D3-我需要把我的“;draw”;或“;重新绘制“;函数可在单击时启用重绘
- 一个预加载图像的函数-现在需要绘制它们,但如何绘制
- 画布绘制函数
- 算法:用于将度数解析为x,y的函数,用于绘制SVG饼图
- 不能在javascript中调用绘制函数
- 我可以将数组值插入到画布的图像绘制函数中吗?
- 我可以检测鼠标当前是否在画布绘制函数内移动
- 画布绘制函数以异步方式运行