0

ポリゴン内にポイントを描画するコードがあります。xとyのテキストボックスの値を変更するたびに、新しいポイントが描画され、ポリゴンに古いポイントが保持されるため、古いポイントをすべてクリアするにはどうすればよいですか?

新しいポイントを描画するたびに、古いタグを削除して新しいタグを作成しようとしましたが、うまくいきません。あなたがこれについて知っているなら、plsは助けます。ありがとう

Canvas = function(){ //v1.0
    var o = this;
    (o.penPos = {x: 0, y: 0}, o.pixelSize = 10, o.pen = {style: "solid",
        size: 1, color: "#000"}, o.brush = {style: "solid", color: "#000"});
};
with({p: Canvas.prototype}){
    p.pixel = function(x, y, color) {
        var o = this, s = document.body.appendChild(document.createElement("div")).style;
//alert ("top"+(y * o.pixelSize) + "px");
        return (s.position = "absolute", s.width = (o.pen.size * o.pixelSize) + "px",
            s.height = (o.pen.size * o.pixelSize) + "px", s.fontSize = "1px",
            s.left = (x * o.pixelSize) + "px", s.top = (y * o.pixelSize) + "px",
            s.backgroundColor = color || o.pen.color, o);
    };
    p.line = function(x1, y1, x2, y2){
        if(Math.abs(x1 - x2) < Math.abs(y1 - y2))
            for(y = Math.min(y1, y2) - 1, x = Math.max(y1, y2); ++y <= x;
                this.pixel((y * (x1 - x2) - x1 * y2 + y1 * x2) / (y1 - y2), y));
        else
            for(x = Math.min(x1, x2) - 1, y = Math.max(x1, x2); ++x <= y;
                this.pixel(x, (x * (y1 - y2) - y1 * x2 + x1 * y2) / (x1 - x2)));
        return this;
    };
    p.arc = function(x, y, raio, startAngle, degrees) {
        for(degrees += startAngle; degrees --> startAngle;
            this.pixel(Math.cos(degrees * Math.PI / 180) * raio + x,
                Math.sin(degrees * Math.PI / 180) * raio + y)); return this;
    };
    p.rectangle = function(x, y, width, height, rotation){
        return this.moveTo(x, y).lineBy(0, height).lineBy(width, 0).lineBy(0, -height).lineBy(-width, 0);
    };
    p.moveTo = function(x, y){var o = this; return (o.penPos.x = x, o.penPos.y = y, o);};
    p.moveBy = function(x, y){var o = this; return o.moveTo(o.penPos.x + x, o.penPos.y + y);};
    p.lineTo = function(x, y){var o = this; return o.line(o.penPos.x, o.penPos.y, x, y).moveTo(x, y);};
    p.lineBy = function(x, y){var o = this; return o.lineTo(o.penPos.x + x, o.penPos.y + y);};
    p.curveTo = function(cx, cy, x, y){};
    p.polyBezier = function(points){};
    p.path = function(points){};
}
function isPointInPoly(poly, pt){
    for(var c = false, i = -1, l = poly.length, j = l - 1; ++i < l; j = i)
        ((poly[i].y <= pt.y && pt.y < poly[j].y) || (poly[j].y <= pt.y && pt.y < poly[i].y))
        && (pt.x < (poly[j].x - poly[i].x) * (pt.y - poly[i].y) / (poly[j].y - poly[i].y) + poly[i].x)
        && (c = !c);
    return c;
}
var length = 50,
points = [
    {x: 35, y:10422},
    {x: 36, y:32752},
    {x: 40, y:35752},
    {x: 55, y:27216},
    {x: 59, y:29319},
    {x: 58, y:10411}
];

var canvas = new Canvas;
canvas.pen.color = "#f00";
canvas.pixelSize = 1;

canvas.moveTo(getx(points[points.length-1].x) , gety(points[points.length-1].y));
for(var i = points.length; i--; canvas.lineTo(getx( points[i].x), gety(points[i].y)));

function draw(){
    var x=38; var y=10433;
    canvas.pixel(getx(x),gety(y));
    alert(isPointInPoly(points, {x: x,y: y}) ? "In" : "Out");
}
function getx(x){
    return Math.round(x*10);
}
function gety(y){
    return Math.round(400-y/250);
}
//]]>
4

1 に答える 1

0

を使用して、キャンバスの長方形のセクションをクリアできますcontext.clearRect(x,y,width,height)。あなたのアプリケーションでは、ポリゴンを描画するたびに、キャンバスをクリアして最初からやり直したいと思うでしょう。これを行うには、単に を呼び出しますcontext.clearRect(0,0,canvas.width,canvas.height)。

この SO questionで概説されている多角形の領域をクリアするためのトリックもあります。

于 2012-06-15T23:55:36.497 に答える