1. 程式人生 > >creates中動態改變setStrokeStyle(width)的width值(2018/4/12)

creates中動態改變setStrokeStyle(width)的width值(2018/4/12)

AI 效果 tro 美好 creat null 繪制 lis ges

剛開始學習用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)