Skip to content
This repository has been archived by the owner on May 29, 2019. It is now read-only.

一片黑 #19

Open
ssuperdreamer opened this issue May 15, 2017 · 2 comments
Open

一片黑 #19

ssuperdreamer opened this issue May 15, 2017 · 2 comments

Comments

@ssuperdreamer
Copy link

ssuperdreamer commented May 15, 2017

把官方的代码跑起来。。。显示一片黑,没有报告任何错误
iOS 模拟器运行
[WXSDKEngine registerModule:@"weex-gcanvas" withClass:[WXGCanvasModule class]];
在iOS代码中 注册模块
然后 js代码中

`

<div ref="test">
    <gcanvas ref="canvas_holder" style="width:750px;height:750px;background-color: green"></gcanvas>
    <div>
        <text>啊啊啊啊啊啊</text>
    </div>
</div>

var gcanvas =  weex.requireModule ( 'weex-gcanvas')

module.exports = {

    created: function () {
        console.log('created gcanvas');
        gcanvas.disable();
    },
    mounted: function () {
        var ref = this.$refs.canvas_holder;
        gcanvas.start(ref, function () {

            var ctx = gcanvas.getContext('2d');

            ctx.fillStyle = 'red';
            ctx.fillRect(0, 0, 100, 100);

            ctx.fillStyle = 'black';
            ctx.fillRect(100, 100, 100, 100);
            ctx.fillRect(25, 210, 700, 5);

            ctx.arc(450, 200, 100, 0, Math.PI * 2, true);
            ctx.fill();

            var img = 'https://img.alicdn.com/tps/TB1TFNdKVXXXXbeaXXXXXXXXXXX-210-330.png';
            ctx.drawImage(img, 100, 200, 210, 330);
            //ctx.drawImage(img, 0,0,105,165, 100, 200, 210, 330);
            ctx.render();
        });
    }
};

`

@ssuperdreamer
Copy link
Author

这个项目还有人来维护吗?

@zdpdsy
Copy link

zdpdsy commented Jan 25, 2018

你这个要另外引入gcanvas.js,地方在src中
image
,这块js代码是做了一些封装的,实际调用的还是gcanvas module方法,具体方法可以查看他的js实现代码
image

`
var GCanvas = require('./jstest/gcanvas.js');
var Image=require('./jstest/gcanvasimage.js');
module.exports = {
mounted: function () {

	  //1、初始化 GCanvas
		var ref = this.$refs.canvas_holder;
		var gcanvas = GCanvas.start(ref);
		var ctx = gcanvas.getContext('2d');
		
		//2、执行渲染操作
		//rect
		ctx.fillStyle = 'red';
		ctx.fillRect(0, 0, 100, 100);

		//rect
		ctx.fillStyle = 'black';
		ctx.fillRect(100, 100, 100, 100);
		ctx.fillRect(25, 210, 700, 5);

		//circle
		ctx.arc(450, 200, 100, 0, Math.PI * 2, true);
		ctx.fill();

		//drawImage
		var image = new Image();
		image.onload = function(){ 
			//由于image加载是异步的 所以需要加载完成后drawImage h5也是这个问题,保持统一
			ctx.drawImage(image, 100, 330);
			ctx.drawImage(image, 100+300, 330, 225, 75);
		}
		image.src = 'https://img.alicdn.com/tps/TB1TFNdKVXXXXbeaXXXXXXXXXXX-210-330.png';
	}
};

`
@ssuperdreamer

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants