1. 程式人生 > >paperJS中使用lab,lch等顏色

paperJS中使用lab,lch等顏色

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()
    }