刚开始学习用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();
	}
}
creates中动态改变setStrokeStyle(width)的width值(2018/4/12)
原文:https://www.cnblogs.com/fortunately/p/8806825.html