Фильтр SVG, чтобы сделать полупрозрачные пиксели непрозрачными? - PullRequest
Новая
       14

Фильтр SVG, чтобы сделать полупрозрачные пиксели непрозрачными?

0 голосов
/ 13 декабря 2018

Как создать фильтр SVG для отображения всех полупрозрачных пикселей в непрозрачные?Все прозрачные пиксели должны оставаться прозрачными.

Я пытаюсь создать маску формы, но нужно, чтобы края масок были полностью непрозрачными.В противном случае у меня останется ореол, когда я использую маску.Вот пример ореола, который я пытаюсь удалить этим SVG-фильтром: https://codepen.io/jedierikb/pen/yGYqKK

enter image description here

Этот ответ здесь делает что-то похожее - установка всех полупрозрачных пикселей в прозрачные, используя feComponentTransfer.

Предложения?

Ответы [ 2 ]

0 голосов
/ 13 декабря 2018

Просто для сравнения с ответом Павла, вот фильтр с type="linear" slope="255"

var ctx = canvas.getContext('2d');
ctx.fillStyle = '#ABEDBE';
ctx.fillRect(0,0,canvas.width,canvas.height);
ctx.fillStyle = 'black';
ctx.font = '14px sans-serif';
ctx.textAlign = 'center';

// first without filter
ctx.fillText('no filter', 60, 20);
drawArc();
drawTriangle();
// then with filter
ctx.setTransform(1, 0, 0, 1, 120, 0);
ctx.filter = 'url(#remove-alpha)';
// and do the same ops
ctx.fillText('no alpha', 60, 20);
drawArc();
drawTriangle();

// to remove the filter
ctx.filter = 'none';


function drawArc() {
  ctx.beginPath();
  ctx.arc(60, 80, 50, 0, Math.PI * 2);
  ctx.stroke();
}

function drawTriangle() {
  ctx.beginPath();
  ctx.moveTo(60, 150);
  ctx.lineTo(110, 230);
  ctx.lineTo(10, 230);
  ctx.closePath();
  ctx.stroke();
}
// unrelated
// simply to show a zoomed-in version
var zCtx = zoomed.getContext('2d');
zCtx.imageSmoothingEnabled = false;
canvas.onmousemove = function drawToZoommed(e) {
  var x = e.pageX - this.offsetLeft,
    y = e.pageY - this.offsetTop,
    w = this.width,
    h = this.height;
    
  zCtx.clearRect(0,0,w,h);
  zCtx.drawImage(this, x-w/6,y-h/6,w, h, 0,0,w*3, h*3);
}
<svg width="0" height="0" style="position:absolute;z-index:-1;">
  <defs>
    <filter id="remove-alpha" x="0" y="0" width="100%" height="100%">
      <feComponentTransfer>
        <feFuncA type="linear" slope="255"></feFuncA>
      </feComponentTransfer>
      </filter>
  </defs>
</svg>

<canvas id="canvas" width="250" height="250" ></canvas>
<canvas id="zoomed" width="250" height="250" ></canvas>
0 голосов
/ 13 декабря 2018

Вот один из способов.Все значения A, кроме 0, установлены на 1 (непрозрачные). 

var ctx = canvas.getContext('2d');
ctx.fillStyle = '#ABEDBE';
ctx.fillRect(0,0,canvas.width,canvas.height);
ctx.fillStyle = 'black';
ctx.font = '14px sans-serif';
ctx.textAlign = 'center';

// first without filter
ctx.fillText('no filter', 60, 20);
drawArc();
drawTriangle();
// then with filter
ctx.setTransform(1, 0, 0, 1, 120, 0);
ctx.filter = 'url(#remove-alpha)';
// and do the same ops
ctx.fillText('no alpha', 60, 20);
drawArc();
drawTriangle();

// to remove the filter
ctx.filter = 'none';


function drawArc() {
  ctx.beginPath();
  ctx.arc(60, 80, 50, 0, Math.PI * 2);
  ctx.stroke();
}

function drawTriangle() {
  ctx.beginPath();
  ctx.moveTo(60, 150);
  ctx.lineTo(110, 230);
  ctx.lineTo(10, 230);
  ctx.closePath();
  ctx.stroke();
}
// unrelated
// simply to show a zoomed-in version
var zCtx = zoomed.getContext('2d');
zCtx.imageSmoothingEnabled = false;
canvas.onmousemove = function drawToZoommed(e) {
  var x = e.pageX - this.offsetLeft,
    y = e.pageY - this.offsetTop,
    w = this.width,
    h = this.height;
    
  zCtx.clearRect(0,0,w,h);
  zCtx.drawImage(this, x-w/6,y-h/6,w, h, 0,0,w*3, h*3);
}
<svg width="0" height="0" style="position:absolute;z-index:-1;">
  <defs>
    <filter id="remove-alpha" x="0" y="0" width="100%" height="100%">
      <feComponentTransfer>
        <feFuncA type="discrete" tableValues="0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1
                                              1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1
                                              1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1
                                              1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1
                                              1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1
                                              1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1
                                              1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1
                                              1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1
                                              1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1
                                              1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1
                                              1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1
                                              1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1
                                              1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1
                                              1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1
                                              1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1
                                              1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1"></feFuncA>
      </feComponentTransfer>
      </filter>
  </defs>
</svg>

<canvas id="canvas" width="250" height="250" ></canvas>
<canvas id="zoomed" width="250" height="250" ></canvas>
...