oCanvas masking с несколькими экранными объектами

Question

Я использую oCanvas для создания треугольников, которые маскируют изображения, каждый треугольник маскирует другое изображение. Проблема, с которой я сталкиваюсь, заключается в том, что когда я маскирую эти треугольники, они скрывают все, что находится за ее пределами, поэтому последний треугольник маскирует треугольники под ним. Есть ли способ избежать отображения прозрачности в другом месте? Я полагаю, что это делает наоборот, что «xor» делает в globalCompositeOperation.

Вот мой код:

var canvas = oCanvas.create({ 
     canvas: "#canvas", 
     background: "#0cc" 
    }); 

    var center = canvas.display.ellipse({ 
     x: canvas.width/2, y: canvas.height/2, 
     radius: canvas.width/3, 
     fill: "#fff" 
    }).add(); 

    var radius = canvas.width/3; 
    var x = canvas.width/2; 
    var y = canvas.height/2; 

    var image = canvas.display.image({ 
     x: 0, 
     y: 0, 
     origin: { x: "center", y: "top" }, 
     image: img, 
     rotation: 120 
    }); 

    center.addChild(image); 

    var triangle = canvas.display.polygon({ 
     x: -canvas.width/3, 
     y: -canvas.width/6, 
     sides: 3, 
     radius: 70, 
     fill: "#0aa", 
     rotation: 30, 
     composition:"destination-atop" 
    }); 

    center.addChild(triangle); 

    var image1 = canvas.display.image({ 
     x: 0, 
     y: 0, 
     origin: { x: "center", y: "top" }, 
     image: img, 
     rotation: 180 
    }); 

    image1.scale(-1, 1); 

    center.addChild(image1); 

    var triangle1 = canvas.display.polygon({ 
     x: 0, 
     y: -canvas.width/3, 
     sides: 3, 
     radius: 70, 
     fill: "#aaa", 
     rotation: 90, 
     composition:"destination-atop" 
    }); 

    center.addChild(triangle1); 

Все мои треугольники и изображения отображаются правильно, если я не использую композиции, но когда я использую состав: «места назначения на вершине» делает то, что я хочу сделать, но она скрывает независимо от того, что находится за пределами треугольника.

Благодарим за помощь!

Answer 1

Должен сначала признаться, что я не приложил слишком много усилий к композиции, когда сделал oCanvas. Это не так хорошо проверено и, вероятно, можно было бы сделать лучше.

Что делает свойство композиции в oCanvas, так это то, что он просто устанавливает свойство globalCompositeOperation в собственный API холста при рисовании всех объектов (https://github.com/koggdal/ocanvas/blob/develop/src/draw.js#L161).

Эффект, о котором вы говорите, если я правильно понимаю его для «destination-atop». От https://developer.mozilla.org/en-US/docs/HTML/Canvas/Tutorial/Compositing значение означает «Существующий холст сохраняется только там, где он перекрывает новую форму. Новая форма рисуется за содержимым холста».

Какое влияние вы хотите? Вы хотите, чтобы изображение было своего рода фоном для треугольника? Затем вы можете установить свойство заливки на изображение: http://ocanvas.org/docs/Display-Objects/Base#property-fill