ActionScript와 유사한 구문을 사용하여 html5 작성 - 5부, 그래픽 그리기

캔버스 자체는 그래픽이며 직접 그릴 수 있습니다.
액션스크립트에는 각 Sprite에 그래픽이 있습니다. 지금은 Shape를 고려하지 않겠습니다.
Html5에서는 그리기가 더 쉽습니다. 동일한 캔버스이므로 이제 두 가지 문제를 고려해야 합니다.
1. 서로 다른 시간에 같은 장소에 각 Sprite의 그래픽을 그리는 방법
2, 지금은 페이지가 지속적으로 새로 고쳐지므로 우리는 그래픽을 사용하여 그림을 그리며 계속해서 새로 고쳐야 합니다


그런 다음 Sprite에 저장된 각 그래픽은 이러한 그리기 명령을 그릴 때 모두 그려진다고 가정합니다. 캔버스
그래서 가정에 따르면 이러한 그리기 명령을 저장하려면 배열이나 클래스가 필요합니다
이제 그리기 지침과 표시 메서드를 포함해야 하는 LGraphics 클래스를 빌드합니다

function LGraphics(){  
    var self = this;  
    self.type = "LGraphics";  
    self.color = "#000000";  
    self.i = 0;  
    self.alpha = 1;  
    self.setList = new Array();  
    self.showList = new Array();  
}  
LGraphics.prototype = {  
    show:function (){  
        var self = this;  
        if(self.setList.length == 0)return;  
        //绘图  
    }  
}

그림을 그리는 중입니다. setList에 모든 그림 지침을 추가한 다음 show 메서드를 호출하여 그림을 그립니다
그림 영역을 저장하는 showList도 있는데 한동안 작동합니다. 아시죠
문제를 해결해 봅시다 지침 저장 방법
LGraphics에 메서드 추가

drawLine:function (thickness,lineColor,pointArray){  
        var self = this;  
        self.setList.push(function(){  
            LGlobal.canvas.beginPath();  
            LGlobal.canvas.moveTo(pointArray[0],pointArray[1]);  
            LGlobal.canvas.lineTo(pointArray[2],pointArray[3]);  
            LGlobal.canvas.lineWidth = thickness;  
            LGlobal.canvas.strokeStyle = lineColor;  
            LGlobal.canvas.closePath();  
            LGlobal.canvas.stroke();  
        });  
    },  
    drawRect:function (thickness,lineColor,pointArray,isfill,color){  
        var self = this;  
        self.setList.push(function(){  
            LGlobal.canvas.beginPath();  
            LGlobal.canvas.rect(pointArray[0],pointArray[1],pointArray[2],pointArray[3]);  
            if(isfill){  
                LGlobal.canvas.fillStyle = color;  
                LGlobal.canvas.fill();  
            }  
            LGlobal.canvas.lineWidth = thickness;  
            LGlobal.canvas.strokeStyle = lineColor;  
            LGlobal.canvas.stroke();  
        });  
        self.showList.push({type:"rect",value:pointArray});  
    },  
    drawArc:function(thickness,lineColor,pointArray,isfill,color){  
        var self = this;  
        self.setList.push(function(){  
            LGlobal.canvas.beginPath();  
            LGlobal.canvas.arc(pointArray[0],pointArray[1],pointArray[2],pointArray[3],pointArray[4],pointArray[5]);  
            if(isfill){  
                LGlobal.canvas.fillStyle = color;  
                LGlobal.canvas.fill();  
            }  
            LGlobal.canvas.lineWidth = thickness;  
            LGlobal.canvas.strokeStyle = lineColor;  
            LGlobal.canvas.stroke();  
        });  
        self.showList.push({type:"arc",value:pointArray});  
    }

세 가지 방법은 선, 직사각형, 원을 그리는 것입니다
내가 저장한 지침은 함수이기 때문에
그래서 , 그릴 때 메소드를 직접 호출할 수 있습니다
그래서 show 메소드를 살짝 수정

rree

완성된 클래스의 소스코드는 잠시 후에 확인해주세요


다음으로 LSprite 생성자에 self.graphics = new LGraphics();를 추가하면 언제든지 그릴 수 있습니다
코드는 다음과 같습니다

show:function (){  
    var self = this;  
    if(self.setList.length == 0)return;  
    var key;  
    for(key in self.setList){  
        self.setList[key]();  
    }  
}

사실 아직은 몇 가지 단점이 있습니다. LSprite를 마우스로 클릭하여 판단할 때 LSprite에 저장된 비트맵만 판단하기 때문입니다. LSprite에 그림을 그리면 클릭 시에도 마우스 이벤트에 반응해야 하므로 판단이 필요합니다. 클릭한 위치가 그려진 영역에 있는지 여부
사실 간단합니다. LGraphics에 ismouseon 메서드를 추가하면 클릭되었는지 여부를 확인할 수 있습니다.

backLayer = new LSprite();  
    addChild(backLayer);  
    //画一圆  
    backLayer.graphics.drawRect(1,"black",[20, 20, 150, 20],true,"#cccccc");  
    //画一个矩形  
        backLayer.graphics.drawArc(2,"black",[100, 100, 50, 0,2*Math.PI,false],true,"#FF0000");  
    //画一条线  
    backLayer.graphics.drawLine(2,"#FF0000",[200, 20, 100, 50]);

showList는 오는 그리기 영역의 크기를 저장합니다. 지금 편리합니다.

ismouseon:function(event,cood){  
        var self = this;  
        var key;  
        for(key in self.showList){  
            if(self.showList[key].type == "rect"){  
                if(event.offsetX >= self.showList[key].value[0] + cood.x && 
                event.offsetX <= self.showList[key].value[0] + cood.x + self.showList[key].value[2] &&   
                    event.offsetY >= self.showList[key].value[1] + cood.y && event.offsetY <= self.showList[key].value[1] + cood.y + self.showList[key].value[3]){  
                    return true;  
                }  
            }else if(self.showList[key].type == "arc"){  
                var xl = self.showList[key].value[0] + cood.x - event.offsetX;  
                var yl = self.showList[key].value[1] + cood.y - event.offsetY;  
                return xl*xl+yl*yl <= self.showList[key].value[2]*self.showList[key].value[2];  
            }  
        }  
          
        return false;  
    }

위 ActionScript와 유사한 구문을 사용하여 html5를 작성하는 것입니다. - 5부, 그래픽 그리기 내용에 대한 자세한 내용은 PHP 중국어 웹사이트(www.php.cn)를 참고하세요. )!