Блог

Как вы можете видеть на прикрепленном изображении, он имеет ромб с эллипсом внутри, который почти прозрачный.

Но это всего лишь изображение.

Как я могу создать это с помощью createjs?

Более подробное описание проблемы:

То, что вы видите на картинке, не совсем то, что мне нужно. В идеале моя задача — сделать из этого ромба два треугольника с эллипсом внутри.

Эллипс должен создавать некоторую прозрачность в треугольнике, чтобы все элементы, которые будут находиться под этим треугольником, были видны насквозь.

Моя реализация:

Я делаю треугольник в соответствии с этим примером: (благодаря этой скрипке)

 (createjs.Graphics.Polygon = function(x, y, points) {
    this.x = x;
    this.y = y;
    this.points = points;
}).prototype.exec = function(ctx) {
    // Start at the end to simplify loop
    var end = this.points[this.points.length - 1];
    ctx.moveTo(end.x, end.y);
    this.points.forEach(function(point) {
        ctx.lineTo(point.x, point.y);
    });
};
createjs.Graphics.prototype.drawPolygon = function(x, y, args) {
    var points = [];
    if (Array.isArray(args)) {
        args.forEach(function(point) {
            point = Array.isArray(point) ? {x:point[0], y:point[1]} : point;
            points.push(point);
        });
    } else {
        args = Array.prototype.slice.call(arguments).slice(2);
        var px = null;
        args.forEach(function(val) {
            if (px === null) {
                px = val;
            } else {
                points.push({x: px, y: val});
                px = null;
            }
        });
    }
    return this.append(new createjs.Graphics.Polygon(x, y, points));
};


stage = new createjs.Stage("demoCanvas");
poly1 = new createjs.Shape();
poly1.graphics.beginFill("Red").drawPolygon(0,0,10,10,10,40,40,30,60,5,30,0);
poly1.x = 10;
poly1.y = 10;
stage.addChild(poly1);
stage.update();
 

(если есть более удобный или даже правильный способ сделать треугольник, и это поможет в решении моей проблемы, я с радостью приму ваше решение).

Далее я просто накладываю эллипс, нарисованный с помощью DrawEllipse, поверх этого треугольника.

Я понимаю, что, возможно, я делаю что-то не так, и именно поэтому я здесь.

Любая помощь будет принята!

Я предполагаю, что вы используете графический API для рисования своего контента. Если это так, вам просто нужно убедиться, что «отверстие» рисуется с обратной намоткой. Это просто означает, что фигуру нужно рисовать в обратном направлении.

Например, метод Canvas2D rect рисует по часовой стрелке, поэтому для вычитания из них инструкции нужно рисовать в другом направлении.

 var s = new createjs.Shape();
s.graphics.beginFill("red")
    .drawRect(0,0,300,300) // Draw a square

    // Then draw a smaller square
    .moveTo(100,100) // Top left
    .lineTo(100,200) // Bottom left
    .lineTo(200,200) // Bottom right
    .lineTo(200,100) // Top right
    .lineTo(100,100) // Top left
    .closePath();    // Optional if you are done
 

У drawEllipse него есть anticlockwise параметр, который также выполняет трюк. Вот пример jsfiddle, который на самом деле рисует его другим способом (сначала небольшой вырез), но с тем же результатом.

Обновить

Для того, чтобы фигура «вырезала» другую, она должна быть частью того же экземпляра graphics и частью тех же инструкций path . Если вы closePath() выполняете какие-либо инструкции по рисованию, любые новые инструкции рисуются поверх этого, не вырезая его. Использование отдельных экземпляров формы делает это автоматически.

Используя обновленный код, я добавил простой drawEllipse() вызов с использованием намотки по часовой стрелке по умолчанию, и он вырезал круг: https://jsfiddle.net/lannymcnie/yd25h8se / — Обратите внимание, что я увеличил масштаб координат выше x10, чтобы сделать их более заметными.

Приветствия,