[]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);
 
 
 
报错截图:
QQ图片20180626165205.png

 
为什么会报这个错??
 
 
 
不知道我这写法var div=Laya.HTMLCanvas.create=new HTMLCanvas("2D");有没有错,文档上说不要直接使用 new HTMLCanvas!有没有用法示例啊
已邀请:

Aar0n

赞同来自:

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

赞同来自:

QQ图片20180626175225.png

这边是静态方法
 
 

QQ图片20180626175408.png

这边是属性  

@laya_Aaron  能给个示例吗    你们这是要搞什么
 
你们是要  var div=Laya.HTMLCanvas.create();这样写还是要这样写var div=Laya.HTMLCanvas.create
 
如果是第一种 源 没有了 div.getCanvas()找不到对象了

QQ图片20180626180116.png

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

QQ图片20180626180323.png

 

 
 
 
 
 

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(texture )
    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的扩展什么的 或如何来使用外部库
 
 
 
 

要回复问题请先

商务合作
商务合作