Question

我想将画布稍微向上移动：它应该与此相对应：

...对此：

rect方法上的w3Schools页面并没有真正帮助我。

使用document.createElement('canvas')创建画布，这就是我想要的方式。

这是我尝试使用的代码：

Potree.TextSprite.prototype.update = function(){

    var canvas = document.createElement('canvas');
    canvas.setAttribute("id", "canvas_Rect");
    var context = canvas.getContext('2d');
    context.font = this.fontsize + "px " + this.fontface;

    //document.getElementById("#canvas_Rect").style.marginTop = "-50px";
    // get size data (height depends only on font size)
    var metrics = context.measureText( this.text );
    var textWidth = metrics.width;
    var margin = 5;
    var spriteWidth = 2*margin + textWidth + 2 * this.borderThickness;
    var spriteHeight = this.fontsize * 1.4 + 2 * this.borderThickness;

    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');
    context.canvas.width = spriteWidth;
    context.canvas.height = spriteHeight;

    context.font = this.fontsize + "px " + this.fontface;

    // background color
    context.fillStyle   = "rgba(" + this.backgroundColor.r + "," + this.backgroundColor.g + ","
                                  + this.backgroundColor.b + "," + this.backgroundColor.a + ")";
    // border color
    context.strokeStyle = "rgba(" + this.borderColor.r + "," + this.borderColor.g + ","
                                  + this.borderColor.b + "," + this.borderColor.a + ")";

    context.lineWidth = this.borderThickness;
    this.roundRect(context, this.borderThickness/2, this.borderThickness/2, 
        textWidth + this.borderThickness + 2*margin, this.fontsize * 1.4 + this.borderThickness, 6);                          

    // text color
    context.strokeStyle = "rgba(0, 0, 0, 1.0)";
    context.strokeText( this.text, this.borderThickness + margin, this.fontsize + this.borderThickness);

    context.fillStyle = "rgba(" + this.textColor.r + "," + this.textColor.g + ","
                                  + this.textColor.b + "," + this.textColor.a + ")";
    context.fillText( this.text, this.borderThickness + margin, this.fontsize + this.borderThickness);


    var texture = new THREE.Texture(canvas); 
    texture.minFilter = THREE.LinearFilter;
    texture.magFilter = THREE.LinearFilter;
    texture.needsUpdate = true; 

    //var spriteMaterial = new THREE.SpriteMaterial( 
    //  { map: texture, useScreenCoordinates: false } );
    this.sprite.material.map = texture;

    this.sprite.scale.set(spriteWidth*0.01,spriteHeight*0.01,1.0);

    //this.material = spriteMaterial;                         
};

Potree.TextSprite.prototype.roundRect = function(ctx, x, y, w, h, r) {
    //  document.getElementById("#canvas_Rect").style.marginTop = "-50px";
    console.log(ctx)
    ctx.beginPath();
    ctx.moveTo(x+r, y);
    ctx.lineTo(x+w-r, y);
    ctx.quadraticCurveTo(x+w, y, x+w, y+r);
    ctx.lineTo(x+w, y+h-r);
    ctx.quadraticCurveTo(x+w, y+h, x+w-r, y+h);
    ctx.lineTo(x+r, y+h);
    ctx.quadraticCurveTo(x, y+h, x, y+h-r);
    ctx.lineTo(x, y+r);
    ctx.quadraticCurveTo(x, y, x+r, y);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();   
};

我正在尝试为其应用边距。我该如何运作？

Answer 1

我不确定您是否希望此画布出现在文档中，还是只是在寻找一种简单的放置方式。

但是定位画布的一种简单方法是在画布上添加绝对定位。

canvasID .style.position ='绝对';

现在只需将顶部，左侧等定位到您需要的任何位置。

canvasID .style.top / left / etc = ?? px;

我想在画布上应用边距

1 个答案: