Babylon.js 第二十二章 动态纹理

 一、

    //创建动态纹理
    let dynaicTexture=new BABYLON.DynamicTexture('dy',{width:100,height:100},scene)
    dynaicTexture.drawText('someting',50,50,
        'Times New Roman','green','red',true,true)
    
    sphereMaterial.diffuseTexture=dynaicTexture
    sphere.material=sphereMaterial

书写文字的参数：

• text：字符串，要写入的单词；
• x：数字，距左侧边缘的距离；
• y：数字，与顶部或底部边缘的距离，取决于 invertY；
• font：字符串，字体定义形式为font-style、font-size、font_name；
• invertY：布尔值，默认为true，此时y是到顶部的距离，当为false时，y是到底部的距离并且字母反转；
• update：布尔值，默认为true，动态纹理会立即更新。

通过动态纹理获取画布对象：

    let dynaicTexture=new BABYLON.DynamicTexture('dy',{width:100,height:100},scene)
    dynaicTexture.drawText('someting',50,50,
        'Times New Roman','green','white',true,true)
    
    sphereMaterial.diffuseTexture=dynaicTexture
    //sphere.material=sphereMaterial
    //获取画布对象
    let ctx=dynaicTexture.getContext()
    ctx.beginPath()
    ctx.moveTo(50,50)
    ctx.lineTo(100,100)
    ctx.lineTo(50,100)
    ctx.lineTo(50,50)
    
    ctx.fillStyle='red'
    ctx.fill()
    ctx.stroke()
    //更新纹理
    dynaicTexture.update()

二、加载图像

    let dynaicTexture=new BABYLON.DynamicTexture('dy',{width:100,height:100},scene)
    
    sphereMaterial.diffuseTexture=dynaicTexture
    //sphere.material=sphereMaterial
    //获取画布对象
    let ctx=dynaicTexture.getContext()

    let img=new Image()
    img.src='../img/10.png'
    //注意此处不能使用箭头函数
    img.onload=function(){
        ctx.drawImage(this,0,0,1000,1000,0,0,100,100)
        dynaicTexture.update()
    }

添加图像的各参数意义：

ctx.drawImage(this, image start x, image start y,
    image width, image height, canvas to x, canvas to y,    
    destination width, destination height);

获取文本在纹理中的宽度：

var DTWidth = ctx.measureText(text).width;