RN canvas绘制图片阴影

canvas绘制图片阴影

效果

引入react-native-canvas
import Canvas, { Image as CanvasImage } from “react-native-canvas”;

数据data.js

{
        buseUrl: imgurl
        width: 206,
        height: 72,
        shadowColor: 'rgba(216, 165, 84, 0.29)',
        shadowOffsetY: 12
}

componentDidMount() {
    // this.handleShawdowFun();
}
// 阴影功能
  handleCanvas = (canvas) => {
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    const image = new CanvasImage(canvas);
    image.crossOrigin = "anonymous";
    const imageData = imgData[this.keynum];
    image.src= imageData.buseUrl;
    canvas.width = imageData.width;
    canvas.height = imageData.height + 20;
    image.addEventListener('load', () => {
      ctx.drawImage(image, 0, 0, imageData.width,    imageData.height).then(() => {});
    });
    // 阴影的x偏移量?
    ctx.shadowOffsetX = 0;
    // 阴影的y偏移
    ctx.shadowOffsetY = imageData.shadowOffsetY;
    // 阴影颜色
    ctx.shadowColor = imageData.shadowColor;
    // 阴影的模糊半径
    ctx.shadowBlur = 8;
    // 绘制
    ctx.stroke();
  }
   render() {
    return (
      <Canvas ref={this.handleCanvas}/>
    );
  }