刚开始学习用createjs写页面效果,遇到了一点问题(已解决):
动态设置setStrokeStyle()的值,随着鼠标的拖动,该值并不会有改变。这可能是createjs自身的小问题。
以下即为完整代码,虽然解决方法不是很科学,但结局还算是美好的??????
var S=this
var m //判断当前状态
var g1,g2,sp1,sp2
var arr=["#000000","#FFFF00","#6633FF","#FF33FF","#99FF00","#660066","#FF0066","#666600","#FFCC33","#6699FF"];//存放颜色
var paint=[2,5,7,10];//存放画笔
var _color="#000000";
var paintWidth=2;
//初始化
inIt()
function inIt()
{
//涂鸦
g1=new createjs.Graphics()
g1.setStrokeStyle(paintWidth,"round")
g1.beginStroke(_color)
g1.moveTo($(window).width()+5,$(window).height()+5)
g1.lineTo($(window).width()+6,$(window).height()+6)
g1.endStroke()
sp1 = new createjs.Shape(g1)
S.addChild(sp1)
//橡皮
g2=new createjs.Graphics()
sp2 = new createjs.Shape(g2)
sp2.alpha=.3
S.addChild(sp2)
drawF(g1,sp1)
}
//选择当前画布状态
S.btn.on("click",function(e)
{
if(!m)
{
S.btn.gotoAndStop(1);
m=true;
drawF(g2,sp2)
}
else
{
S.btn.gotoAndStop(0);
m=false;
drawF(g1,sp1)
}
})
//选颜色
for(var i=0;i<10;i++)
{
S.colorBox["c"+i]._id=i
S.colorBox["c"+i].on("mousedown",changeColorF)
}
function changeColorF(e)
{
_color=arr[e.currentTarget._id];
}
//选择笔触
for(var j=0;j<4;j++)
{
S.strokeBox["b"+j]._id=j
S.strokeBox["b"+j].on("mousedown",changeStrokeF)
}
function changeStrokeF(e)
{
paintWidth=paint[e.currentTarget._id]
g1.setStrokeStyle(paintWidth,"round")
g1.beginStroke(_color)
g1.moveTo($(window).width()+5,$(window).height()+5)
g1.lineTo($(window).width()+6,$(window).height()+6)
g1.endStroke()
}
//绘制+橡皮擦
function drawF(g,sp)
{
var startX,startY,moveX,moveY
S.area.hasEventListener("mousedown",downF)?S.area.removeEventListener("mousedown",downF):null
S.area.hasEventListener("pressmove",moveF)?S.area.removeEventListener("pressmove",moveF):null
S.area.hasEventListener("pressup",upF)?S.area.removeEventListener("pressup",upF):null
S.area.addEventListener("mousedown",downF)
S.area.addEventListener("pressmove",moveF)
S.area.addEventListener("pressup",upF)
function downF(e)
{
startX=stage.mouseX;
startY=stage.mouseY;
if(!m)
{
g.beginStroke(_color)
g.setStrokeStyle(paintWidth,"round")
g.moveTo(startX,startY)
}
}
function moveF(e)
{
moveX=stage.mouseX;
moveY=stage.mouseY;
if(moveY<=$(window).height()-150)
{
if(!m)
{
g.lineTo(moveX,moveY)
}else{
g.beginFill("#cccccc").drawCircle(moveX,moveY,20).endFill()
}
S.addChild(sp)
}
}
function upF(e)
{
g.endStroke();
}
}
原文地址:https://www.cnblogs.com/fortunately/p/8806825.html