9

我知道如何使用自定义视图(EditText 或 TextView)来描边文本,但我无法实现像这样漂亮的东西,这是使用 Photoshop 完成的。是的,它也有外阴影。Photoshop 中的描边文本

到目前为止,我所做的是调整笔触宽度和笔触连接样式。但是,如果我增加笔画宽度,笔画会发生在整个文本中。据我搜索,有一个名为MagicTextView的库,但它也无法给出上述结果。

更新:我根据@pskink 的建议调整了一些东西。现在可以了。但是我不能再拖了。如果我拖动那个 EditText,就会出现一些像这样的奇怪线条。 文本视图上方的奇怪线条

这是代码:

@Override public void onDraw(Canvas canvas) {
  final int x = this.getLeft();
  final int y = this.getBottom();

  mText = this.getText().toString();

  p.setStrokeWidth(30);
  p.setStyle(Style.STROKE);
  p.setStrokeJoin(Join.ROUND);
  p.setColor(0xffffffff);

  canvas.drawText(mText, x, y, p);

  p.setStyle(Style.FILL);
  p.setColor(0xff000000);

  canvas.drawText(mText, x, y, p);
}
4

2 回答 2

6

经过几个小时的调整,我已经修复了更新问题中所述的奇怪线路问题。我想我应该在这里发布作为答案。

@Override public void onDraw(Canvas canvas) {
    mText = this.getText().toString();

    p.setStyle(Style.STROKE);
    p.setStrokeJoin(Join.ROUND);
    p.setShadowLayer(10, 1, 1, 0xcfcccccc);

    canvas.drawText(mText, 0, getLineHeight(), p);

    p.clearShadowLayer();
    p.setStrokeWidth(35);
    p.setStrokeJoin(Join.ROUND);
    p.setStyle(Style.STROKE);
    p.setColor(0xffffffff);

    canvas.drawText(mText, 0, getLineHeight(), p);

    p.setStyle(Style.FILL);
    p.setColor(0xff000000);

    canvas.drawText(mText, 0, getLineHeight(), p);
    canvas.translate(xPos, yPos);
}

ACTION_MOVExPos 和 yPos 是来自onTouch 事件的 x 和 y 值。我们需要将行高添加为画布文本的 Y。

于 2015-05-03T18:08:18.727 回答
5

但是,如果我增加笔画宽度,笔画会发生在整个文本中。

如果问题是描边居中,并且您希望它在文本之外,请参阅:Android Paint stroke width 定位

您必须根据您的笔划预先计算所需的宽度和高度。

我建议尝试使用非常粗体的字体。在下图中,白色笔划将以红线为中心(这将是每个黑色字母的轮廓)。

在此处输入图像描述

回应您的更新

如果我拖动那个 EditText,就会出现一些奇怪的线条。

该行可能是焦点在 EditText 上的结果。您可以明确移除焦点:Android:强制 EditText 移除焦点?

或者,您可以设置焦点的样式(如果它不会对 UI 的其余部分产生不利影响,则可能是不可见的):How to change the color of a focused EditText of a focus when using "android:Theme.Holo.Light"?

于 2015-04-08T05:31:33.983 回答