在Snap.svg中掩盖的麻烦

时间:2016-09-09 17:33:25

标签: javascript svg mask snap.svg

我尝试使用Snap.svg创建一个字形图标(稍后会进行动画处理,但现在只是图标)。它应该是这样的:

我已导出每个面部特征的路径。然后,使用Snap,我创建了一个白色圆圈并添加了元素的每个路径:

var snapFace = Snap('#face');

var faceCircle = snapFace.circle(17.075, 17.075, 17.075);
faceCircle.attr({
  fill: '#fff'
});

var faceLeftEye = snapFace.path('M34.4302501,33.1788512 C35.6480686,33.1788512 36.6363606,34.1675226 36.6363606,35.3819266 C36.6363606,36.6008833 35.6480686,37.5876578 34.4302501,37.5876578 C33.2162254,37.5876578 32.2313479,36.6008833 32.2313479,35.3819266 C32.2313479,34.1679019 33.2162254,33.1788512 34.4302501,33.1788512 L34.4302501,33.1788512 Z');
faceLeftEye.attr({
  transform: 'translate(-23.08, -22.81)',
  fill: '#fff'
});

var faceRightEye = snapFace.path('M34.4302501,33.1788512 C35.6480686,33.1788512 36.6363606,34.1675226 36.6363606,35.3819266 C36.6363606,36.6008833 35.6480686,37.5876578 34.4302501,37.5876578 C33.2162254,37.5876578 32.2313479,36.6008833 32.2313479,35.3819266 C32.2313479,34.1679019 33.2162254,33.1788512 34.4302501,33.1788512 L34.4302501,33.1788512 Z');
faceRightEye.attr({
  transform: 'translate(-11.08, -22.81)',
  fill: '#fff'
});

var faceMouth = snapFace.path('M40.2511192,53.2459206 C33.6627589,53.2459206 28.3195327,49.6857932 28.2884233,41.3393734 L52.208883,41.3393734 C52.183085,49.6857932 46.8387207,53.2459206 40.2511192,53.2459206 L40.2511192,53.2459206 Z');
faceMouth.attr({
  transform: 'translate(-23.08,-22.81)',
  fill: '#fff'
});

从那里我将三个面部特征分组并将它们设置为圆圈上的mask属性:

var maskGroup = snapFace.group(faceLeftEye, faceRightEye, faceMouth);

faceCircle.attr({
  mask: maskGroup
});

我期待在这一点上让一切都融合在一起。不幸的是它看起来像这样:

我知道面部的外圈在正确的位置,因为我可以在检查员身上找到它;它只是掩盖了。我无法弄清楚如何使反面发生,面部特征从外圆减去。

如果有人有建议,我真的很感激帮助!

1 个答案:

答案 0 :(得分:1)

我应该看起来更难。在这里找到答案:An SVG rectangle with multiple holes using Snap.svg - 特别是Pen

基本上我不得不在面具上添加一个额外的圆圈,白色填充,然后将面部特征填充设置为黑色。

public void printKeyHash() {
    try {
        PackageInfo info = getPackageManager().getPackageInfo("your package name here", PackageManager.GET_SIGNATURES);
        for (Signature signature : info.signatures) {
            MessageDigest md = MessageDigest.getInstance("SHA");
            md.update(signature.toByteArray());
            Log.e("SHA: ", Base64.encodeToString(md.digest(), Base64.DEFAULT));
        }
    } catch (PackageManager.NameNotFoundException e) {
        e.printStackTrace();
    } catch (NoSuchAlgorithmException e) {
        e.printStackTrace();
    }
}