bitmapdata.draw的问题

donnier

先贴源码
<script>
var imgBitmapdata = null,
imgBitmap = null;
function main() {
    LGlobal.setDebug(true);
    var loader = new LLoader();
    loader.addEventListener(LEvent.COMPLETE, function(event) {
        imgBitmapdata = new LBitmapData(event.target);
        imgBitmap = new LBitmap(imgBitmapdata);
        test();
    });
    loader.load('http://192.168.1.88/test.jpg', 'bitmapData');

}
function test() {
    var bg = new LShape();
    bg.graphics.drawRect(0, '#000000', [0, 0, 1200, 1200], true, '#ff0000');
    addChild(bg);

    var s1 = new LSprite();
    var shape = new LShape();
    shape.graphics.drawRect(0, '#000000', [0, 0, 300, 300], true, '#000000');
    shape.alpha = 0;
    s1.addChild(shape);

    s1.graphics.clear();
    s1.graphics.beginBitmapFill(imgBitmapdata);
    s1.graphics.drawTriangles([0, 0, 0, 300, 300, -100, 300, 300], [0, 2, 1, 2, 1, 3], [0, 0, 0, 1, 1, 0, 1, 1]);


    var bitmapdata2 = new LBitmapData(null, 0, 0, 200, 200, LBitmapData.DATA_CANVAS);
    var matrix = new LMatrix();
    matrix.translate(20, 20);
    bitmapdata2.draw(s1, matrix);
    var bitmap2 = new LBitmap(bitmapdata2);

    var clone = s1.clone();
    clone.x = 400;
    clone.y = 400;
    addChild(clone);
    trace(clone.getWidth())
    trace(clone.getHeight())

    var s3 = new LSprite();
    s3.addChild(bitmap2);
    addChild(s3);


}
init(50, 'canvas1', 1200, 1200, main);
</script>

donnier

下面是运行效果


我想得到的结果是,第一张图片呈现下面的效果,就是蓝色框内的东西也显示出来, 不知道怎么弄，请大神帮忙

lufy

donnier 发表于 2016-12-6 14:01
下面是运行效果

http://lufylegend.com/forum/foru ... &extra=page%3D2
方法在这里

donnier

你好，我不是想问扭曲是什么原理或者怎么实现，现在是我有一个隐藏层s1，对其扭曲后，如果直接显示s1是没问题，但是bitmapdata.draw绘制到另外一个层里面, 超出s1的宽高的部分不显示

lufy

donnier 发表于 2016-12-6 14:15
你好，我不是想问扭曲是什么原理或者怎么实现，现在是我有一个隐藏层s1，对其扭曲后，如果直接显示s1是没问 ...

试试下面的做法

1. var layer = new LSprite();
   
2. layer.graphics.drawRect(0, "#000000", [0, 0, 实际长, 实际宽]);
   
3. layer.addChild(隐藏层s1);
   
4. 
   
5. bitmapdata.draw(layer);

复制代码

另外，隐藏层s1的位置你可能需要适当的调整一下

donnier

不行，效果还是没有区别，我把开始那个代码加了下注释，这样好看点

<script>
var imgBitmapdata = null,
imgBitmap = null;

function main() {
    LGlobal.setDebug(true);
    var loader = new LLoader();
    loader.addEventListener(LEvent.COMPLETE, function(event) {
        imgBitmapdata = new LBitmapData(event.target);
        imgBitmap = new LBitmap(imgBitmapdata);
        test();
    });
    loader.load('http://192.168.1.88/test.jpg', 'bitmapData');

}

function test() {
    //创建红色背景
    var bg = new LShape();
    bg.graphics.drawRect(0, '#000000', [0, 0, 1200, 1200], true, '#ff0000');
    addChild(bg);

    //创建s1层
    var s1 = new LSprite();
    var shape = new LShape();
    shape.graphics.drawRect(0, '#000000', [0, 0, 300, 300], true, '#000000');
    shape.alpha = 0;
    s1.addChild(shape);

    //开始扭曲
    s1.graphics.clear();
    s1.graphics.beginBitmapFill(imgBitmapdata);
    s1.graphics.drawTriangles([0, 0, 0, 300, 300, -100, 300, 300], [0, 2, 1, 2, 1, 3], [0, 0, 0, 1, 1, 0, 1, 1]);

    //绘制到一个bitmapdata并加入舞台
    var bitmapdata2 = new LBitmapData(null, 0, 0, 200, 200, LBitmapData.DATA_CANVAS);
    var matrix = new LMatrix();
    matrix.translate(20, 20);
    bitmapdata2.draw(s1, matrix);
    var bitmap2 = new LBitmap(bitmapdata2);

    var s3 = new LSprite();
    s3.addChild(bitmap2);
    addChild(s3);

    //s1扭曲后直接显示的效果
    var clone = s1.clone();
    clone.x = 400;
    clone.y = 400;
    addChild(clone);


}
init(50, 'canvas1', 1200, 1200, main);
</script>

donnier

以上是加了注释的代码

lufy

donnier 发表于 2016-12-6 14:46
以上是加了注释的代码

你仔细看看我给你的代码，你写反了吧

donnier

没有写反，我试了，不行，就改回来了，你教我的应该是下面这样对吧
<script>
var imgBitmapdata = null,
imgBitmap = null;

function main() {
        LGlobal.setDebug(true);
        var loader = new LLoader();
        loader.addEventListener(LEvent.COMPLETE, function(event) {
                imgBitmapdata = new LBitmapData(event.target);
                imgBitmap = new LBitmap(imgBitmapdata);
                test();
        });
        loader.load('http://192.168.1.88/test.jpg', 'bitmapData');

}

function test() {
        //创建红色背景
        var bg = new LShape();
        bg.graphics.drawRect(0, '#000000', [0, 0, 1200, 1200], true, '#ff0000');
        addChild(bg);

        //创建s1层
        var s1 = new LSprite();
        var shape = new LShape();
        shape.graphics.drawRect(0, '#000000', [0, 0, 300, 300], true, '#000000');
        shape.alpha = 0;
        s1.addChild(shape);

        //开始扭曲
        s1.graphics.clear();
        s1.graphics.beginBitmapFill(imgBitmapdata);
        s1.graphics.drawTriangles([0, 0, 0, 300, 300, -100, 300, 300], [0, 2, 1, 2, 1, 3], [0, 0, 0, 1, 1, 0, 1, 1]);

        //绘制到一个bitmapdata并加入舞台
        var bitmapdata2 = new LBitmapData(null, 0, 0, 200, 200, LBitmapData.DATA_CANVAS);
        var matrix = new LMatrix();
        matrix.translate(20, 20);
        var layer=new LSprite();
        layer.graphics.drawRect(0, "#000000", [0, 0, 300, 400]);
        layer.addChild(s1);
        bitmapdata2.draw(layer, matrix);
        var bitmap2 = new LBitmap(bitmapdata2);

        var s3 = new LSprite();
        s3.addChild(bitmap2);
        addChild(s3);

        //s1扭曲后直接显示的效果
        var clone = s1.clone();
        clone.x = 400;
        clone.y = 400;
        addChild(clone);


}
init(50, 'canvas1', 1200, 1200, main);
</script>

lufy

donnier 发表于 2016-12-6 15:33
没有写反，我试了，不行，就改回来了，你教我的应该是下面这样对吧

var imgBitmapdata = null,

这就是我说的，

另外，隐藏层s1的位置你可能需要适当的调整一下

看demo吧
http://lufylegend.com/demo/test/152.html