Question

我在使用Zxing制作矩形动画时遇到问题，我正在使用此库构建一个二维阅读器，我的客户问我要动画激光。没问题，激光动画效果很好。

但是他问我激光上的纹理：/，而且我无法对此进行动画处理。

此致，镭射代码是过去的复制品。

const { parse, resolve } = require('url');
const trim = require('lodash/trim');
const startsWith = require('lodash/startsWith');
const includes = require('lodash/includes');


// https://github.com/GoogleChrome/puppeteer
const puppeteer = require('puppeteer');
// https://github.com/gwuhaolin/chrome-finder
const findChrome = require('chrome-finder'); 


function resolveUrl(url, baseUrl) {
  url = trim(url);
  if (!url) return null;
  if (startsWith(url, '#')) return null;
  const { protocol } = parse(url);
  if (includes(['http:', 'https:'], protocol)) {
    return url.split('#')[0];
  } if (!protocol) {
    return resolve(baseUrl, url).split('#')[0];
  }
  return null;
}

async function collectLinks1(htmlPage) {
  const baseUrl = htmlPage.url();
  const links = [];
  const assetUrls = await htmlPage.$$eval('a[href]', assetLinks => assetLinks.map(link => link.href));

  assetUrls.forEach(link => {
    const _link = resolveUrl(link, baseUrl);
    if (_link) links.push(_link);
  });

  return links;
}

async function collectLinks2(htmlPage) {
  const baseUrl = htmlPage.url();
  const links = [];

  await htmlPage.exposeFunction('pushToLinks', link => {
    const _link = resolveUrl(link, baseUrl);
    if (_link) links.push(_link);
  });

  await htmlPage.evaluate(() => {
    function findLinks(document) {
      document.querySelectorAll('a[href]')
        .forEach(link => {
          window.pushToLinks(link.href);
        });
    }
    findLinks(window.document);
  });

  return links;
}

const crawl = async url => {
  try {
    console.log(`Crawling ${url}`);

    const browser = await puppeteer.launch({
      headless: false,
      executablePath: findChrome(),
    });
    const page = await browser.newPage();

    await page.goto(url);

    // OK
    const links1 = await collectLinks1(page);
    links1.forEach(link => { console.log(link); });

    // KO
    const links2 = await collectLinks2(page);
    links2.forEach(link => { console.log(link); });

    await browser.close();
  } catch (err) {
    console.log(err);
  }
};

crawl('http://pieroxy.net/blog/2014/11/18/user_agent_detection_in_java.html');

我的代码尝试通过激光动画纹理

    @Override
    public void drawLaser(Canvas canvas) {
        // Draw a red "laser scanner" line through the middle to show decoding is active
        mLaserPaint.setAlpha(155);
        int middle = mFramingRect.height() / 2 + mFramingRect.top;
        middle = middle + cntr;
        if ((cntr < 300) && (!goingup)) {
            canvas.drawRect(mFramingRect.left + 2,
                    middle - 5,
                    mFramingRect.right - 1,
                    middle + 10,
                    mLaserPaint);
            cntr = cntr + 4;
        }

        if ((cntr >= 300) && (!goingup)) goingup = true;

        if ((cntr > -300) && (goingup)) {
            canvas.drawRect(mFramingRect.left + 4,
                    middle - 5,
                    mFramingRect.right - 1,
                    middle + 10,
                    mLaserPaint);
            cntr = cntr - 4;
        }

        if ((cntr <= -300) && (goingup)) goingup = false;

        postInvalidateDelayed(ANIMATION_DELAY,
                mFramingRect.left - POINT_SIZE,
                mFramingRect.top - POINT_SIZE,
                mFramingRect.right + POINT_SIZE,
                mFramingRect.bottom + POINT_SIZE);
    }

两个方法都在方法onDraw中调用

    public void drawTexture (Canvas canvas) {
        int a = 200;
        int b = 220;
        int c = 400;
        int d = 440;

        Paint paint = new Paint();
        paint.setColor(Color.RED);

        c = c + 100;
        d = d + 100;

        canvas.drawRect(a,b,c,d,paint);
        invalidate();
    }

我不知道如何为我的矩形:(，感谢您的帮助。

这是我的完整代码

https://gist.github.com/memoadian/2266fbfe6bdf5a3345f2776bdbe7bf2c

更新

好的，动画就是这样。

    public void onDraw(Canvas canvas) {
        if (this.getFramingRect() != null) {
            ...
            this.drawLaser(canvas);
            this.drawTexture(canvas);
        }
    }

结果是

enter image description here

Answer 1

我将抽奖用于动画，并禁用激光和透明矩形，也许这是您的下一个想法

mScannerView.setLaserColor(mContext.getResources().getColor(R.color.btn_color));
    mScannerView.setLaserEnabled(false);
    mScannerView.setBorderColor(mContext.getResources().getColor(android.R.color.transparent));
    mScannerView.setMaskColor(mContext.getResources().getColor(android.R.color.transparent));
    List<BarcodeFormat> enableFormat = new ArrayList<>();
    enableFormat.add(BarcodeFormat.QR_CODE);
    mScannerView.setFormats(enableFormat);
    mScannerView.setAutoFocus(true);

    try {
        int padding = paddingInDp(100);
        lottieView.setPadding(-padding, -padding, -padding, -padding);
        lottieView.setAnimation("barcode_scan.json");
        lottieView.setSpeed(0.5f);
        lottieView.playAnimation();
        lottieView.loop(true);
    } catch (Exception e){
        e.printStackTrace();
    }

我在Zxing Android中为画布设置动画时遇到问题

1 个答案: