2.0怎么把一个图片当画笔一直画

Creator 2.x
#1

1.0的版本有

RenderTexture.begin();
sprite.visit();
RenderTexture.end();

2.0的Graphics倒是可以画线条但没办法直接使用图片进行画

参照相机截图的方法写了一个
this.createSprite();
var img = this.initImage();
let texture = new cc.Texture2D();
texture.initWithElement(img);
let spriteFrame = new cc.SpriteFrame();
spriteFrame.setTexture(texture);
this.show_img.spriteFrame = spriteFrame;

移动的时候，一直采集相机的图片数据，然后生成img，再设置给精灵
但好卡呀，而且效果不怎么好

有没什么好的方法，请教一下

相关的几个方法

init () {
this.label.string = ‘’;
let texture = new cc.RenderTexture();
let gl = cc.game._renderContext;
texture.initWithSize(cc.visibleRect.width, cc.visibleRect.height, gl.STENCIL_INDEX8);
this.camera.targetTexture = texture;
this.texture = texture;
},
initImage () {
var dataURL = this._canvas.toDataURL(“image/png”);
var img = document.createElement(“img”);
img.src = dataURL;
return img;
},
createSprite () {
let width = this.texture.width;
let height = this.texture.height;
if (!this._canvas) {
this._canvas = document.createElement(‘canvas’);
this._canvas.width = width;
this._canvas.height = height;
}
else {
this.clearCanvas();
}
let ctx = this._canvas.getContext(‘2d’);
this.camera.render();
let data = this.texture.readPixels();

    let rowBytes = width * 4; 
    for (let row = 0; row < height; row++) {
        let srow = height - 1 - row;
        let imageData = ctx.createImageData(width, 1);
        let start = srow * width * 4;
        for (let i = 0; i < rowBytes; i++) {
            imageData.data[i] = data[start + i];
        }
        ctx.putImageData(imageData, 0, row);
    }
    return this._canvas;
}
#2

移动画笔，实时渲染到一个Renderertexture 可能单词写错，要睡觉了。

#3

非常感谢，不过要怎么把这个画笔渲染到Renderertexture
Renderertexture只看到了初始加载贴图的方法

#4

有没人了解，帮忙解答一下

#5

看源码，webgl和canvas可以自由切换吗

#6

不管是相机，还是直接draw,都是倒的，而且不会一直画，只会倒一个影

this.renderSprite();
// this.texture.drawTextureAt(this.gold_sprite.spriteFrame.getTexture(), self.gold.x, self.gold.y);

this.show_img.spriteFrame.setTexture(this.texture);07_capture_texture.zip (4.4 KB)

#7

大牛都哪去了

#8

@panda 可否帮忙一下

#9

关于图片倒置的问题，论坛有相关的帖子，你搜下

#10

图片倒置倒是小事，主要还是把图片当画笔一直没头绪

#11

var canvas = document.createElement(‘canvas’);
var context = canvas.getContext(‘2d’)

    var target_tex = this.gold_sprite.spriteFrame.getTexture();
    var source_tex = this.show_cut.spriteFrame.getTexture();
    var rt = new cc.RenderTexture();
    rt.initWithSize(500, 500);

    rt.drawTextureAt(source_tex, 0, 0);
    rt.drawTextureAt(target_tex, 0, 0);  

    canvas.width = 500;
    canvas.height = 500;
    var data = rt.readPixels();
    context.putImageData(new ImageData(new Uint8ClampedArray(data), 500, 500), 0, 0)
    
    var image = new Image();
    image.src = canvas.toDataURL();
    rt.initWithElement(image);
    let spriteFrame = this.show_cut.spriteFrame.clone();
    spriteFrame.setTexture(rt)

    this.show_cut.spriteFrame = spriteFrame;

直接这样写，readPixels返回的都是空数据
creator 2.0.5

#12

需要通过cc.loader.loadRes加载的spriteFrame，tex的width,height才都是正确的
两个方法drawTextureAt，context.drawImage
都可以进行绘画了

只是会有一些问题

drawTextureAt不会绘制透明图层，但只要使用RenderTexture比较简单，看进去是调用updateSubImage，设置参数premultiplyAlpha没有效果

drawImage需要创建一个canvas来获取context,才能drawImage，不知道webgl和canvas有没区别，还没去试

#13

只做过cocos2dx版本 creator 目前还没有试过 无法帮你了。。。

#14

RenderTexture.begin();
sprite.visit();
RenderTexture.end();

是begin end之间同一个sprite visit多次吗

#15

visit只调用一次，感觉像是绘制一段距离

#16

楼主解决没有，2.0移除一堆私有接口后，我也不会弄了。