HTMLCanvas Laya.stage.addChild(HTMLCanvas); 挂载到舞台报错

谢

想要加入百度图表使用Html Canvas的代理类后加入舞台时报错

示例代码：

var div=Laya.HTMLCanvas.create=new HTMLCanvas("2D");
     div.size(600,400);
     Laya.stage.addChild(div);
     console.log(div); 
var myChart = echarts.init(div.getCanvas());

// 指定图表的配置项和数据

var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {

data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]

}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
报错截图：

为什么会报这个错？？

不知道我这写法var div=Laya.HTMLCanvas.create=new HTMLCanvas("2D");有没有错，文档上说不要直接使用 new HTMLCanvas！有没有用法示例啊

Aar0n

用，HTMLCanvas.create 源码里写了不要直接new ，给了create方法。

谢

这边是静态方法

这边是属性

@laya_Aaron 能给个示例吗你们这是要搞什么

你们是要 var div=Laya.HTMLCanvas.create();这样写还是要这样写var div=Laya.HTMLCanvas.create

如果是第一种源没有了 div.getCanvas()找不到对象了

如果是第二种这还要什么操作？？

Aar0n

/**
         * <p>绘制 当前<code>Sprite</code> 到 <code>Canvas</code> 上，并返回一个HtmlCanvas。</p>
         * <p>绘制的结果可以当作图片源，再次绘制到其他Sprite里面，示例：</p>
         *
         * var htmlCanvas:HTMLCanvas = sprite.drawToCanvas(100, 100, 0, 0);//把精灵绘制到canvas上面
         * var texture:Texture = new Texture(htmlCanvas);//使用htmlCanvas创建Texture
         * var sp:Sprite = new Sprite().pos(0, 200);//创建精灵并把它放倒200位置
         * sp.graphics.drawTexture(texture);//把截图绘制到精灵上
         * Laya.stage.addChild(sp);//把精灵显示到舞台
         *
         * <p>也可以获取原始图片数据，分享到网上，从而实现截图效果，示例：</p>
         *
         * var htmlCanvas:HTMLCanvas = sprite.drawToCanvas(100, 100, 0, 0);//把精灵绘制到canvas上面
         * 
         * htmlCanvas.toBase64("image/png",0.92,function(base64){//webgl和canvas模式下为同步方法，加速器下是异步方法
         *                      trace(base64);//打印图片base64信息，可以发给服务器或者保存为图片
         *                      });
         *
         * @param   canvasWidth 画布宽度。
         * @param   canvasHeight 画布高度。
         * @param   x 绘制的 X 轴偏移量。
         * @param   y 绘制的 Y 轴偏移量。
         * @return HTMLCanvas 对象。
         */
        public function drawToCanvas(canvasWidth:Number, canvasHeight:Number, offsetX:Number, offsetY:Number):HTMLCanvas {
            if (Render.isConchNode) {
                var canvas:HTMLCanvas = HTMLCanvas.create("2D");
                var context:RenderContext = new RenderContext(canvasWidth, canvasHeight, canvas);
                context.ctx.setCanvasType(1);
                conchModel.drawToCanvas(canvas.source, offsetX, offsetY);
                return canvas;
            } else {
                return RunDriver.drawToCanvas(this, _renderType, canvasWidth, canvasHeight, offsetX, offsetY);
            }
        }

这个两种方式，只能用这个，那个文档和源码没写清楚

谢

@laya_Aaron

    var HTMLCanvas=Laya.HTMLCanvas;
    var Texture=Laya.Texture;
    var RenderContext=Laya.RenderContext;
    var Render= Laya.Render;
    var RunDriver=Laya.RunDriver;

var htmlCanvas = drawToCanvas(600, 400, 0, 0);//把精灵绘制到canvas上面
console.log(htmlCanvas);
//百度echarts表格实例化方法用百度表格生成的canvas对象替换htmlCanvas[size=14] 的canvas对象[/size]

var myChart = echarts.init(htmlCanvas.getCanvas()); 
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        }; 
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
     console.log(htmlCanvas.getCanvas());
    var texture = new Texture(htmlCanvas);//使用htmlCanvas创建Texture
    console.log([size=14]texture[/size][size=14] [/size])
    var sp = new Sprite().pos(0, 200);//创建精灵并把它放倒200位置
    sp.graphics.drawTexture(texture);//把截图绘制到精灵上
    Laya.stage.addChild(sp);//把精灵显示到舞台
  
   function drawToCanvas(canvasWidth, canvasHeight, offsetX, offsetY) {
        if (Render.isConchNode) {
            var canvas = HTMLCanvas.create("2D");
            var context = new RenderContext(canvasWidth, canvasHeight, canvas);
            context.ctx.setCanvasType(1);
            conchModel.drawToCanvas(canvas.source, offsetX, offsetY);
            return canvas;
        } else {
            return RunDriver.drawToCanvas(this, 0, canvasWidth, canvasHeight, offsetX, offsetY);
        }
}

这样做舞台上没有任何显示

我现在想做的是在项目中使用百度的图表因为公司说不想用在body下创建div的方式来引用图表是要挂载到某一弹层中使用这个图表功能
如弹层中的作为box中作为子级

官方没有引入外部库作为layabox的扩展什么的或如何来使用外部库

Aar0n

谢那个源码介绍了只有那两种使用方式，另外使用百度的图表，基本上是能往canvas上画，就能画到我们引擎的canvas中。。如果做不到，那就实现不了

Aar0n

谢还有业务逻辑不在引擎服务范围，就不用贴业务代码了。