paperJS中使用lab,lch等顏色
阿新 • • 發佈:2018-12-11
paperJS中不能直接使用lch或者lab顏色,不夠可以呼叫tostring方法將其轉換為對應的rgb顏色供給paperJS使用,下面是程式中的一個函式: this.addContour = function( contour, contourColor, opacity=1.){ //this._ctx.clearRect(0,0,this._canvasWidth,this._canvasWidth) console.log("addcontour") var ctx = this._ctx //ctx.beginPath() console.log("contourColor",contourColor) //ctx.strokeStyle = contourColor[1] console.log("contourColor",contourColor) var path = new paper.Path() path.strokeColor = contourColor[1] path.strokeWidth = 3 //var color = new paper.Color(contourColor[1]) var labColor = d3.lab(contourColor[1]) var lchColor = d3.hcl(labColor) lchColor.opacity = opacity //console.log("lchColor",lchColor) //ctx.fillStyle = lchColor //ctx.lineWidth = 3 var color = d3.rgb(lchColor).toString() path.fillColor = lchColor.toString() //若此處沒有toString(),畫出來的是黑色,即顏色沒有賦值給path.fillColor for(var i=0; i < contour.length; ++i){ //console.log("i",i) var dotCanvas = contour[i] var coordinateArray = dotCanvas["coordinates"] for(var j = 0; j < coordinateArray.length; ++j){ var array = coordinateArray[j] if(array.length == 0) continue for(var k = 0; k < array.length; ++k){ //console.log("array[k]",array[k]) coordinate = array[k] for(var m = 0; m < coordinate.length; ++m){ var point = new paper.Point(coordinate[m][0], this._canvasHeight-coordinate[m][1]) if(m == 0){ path.moveTo(point) //ctx.moveTo(coordinate[m][0], this._canvasHeight-coordinate[m][1]) }else{ //ctx.lineTo(coordinate[m][0], this._canvasWidth-coordinate[m][1]) path.lineTo(point) } } } } } path.closePath() paper.view.draw() //path.style = null //ctx.closePath() //ctx.fill() //ctx.stroke() }