HarmonyOS鸿蒙Next是否支持根据绘制逻辑生成ImageData

HarmonyOS鸿蒙Next是否支持根据绘制逻辑生成ImageData 鸿蒙是否支持根据绘制逻辑生成imagedata

Android 参考实现：
private static Bitmap genShipThumbnail(int clr, int idx) {

Paint pLine = new Paint();
pLine.setColor(Color.BLACK);
pLine.setStrokeWidth(2);
pLine.setStyle(Style.STROKE);
pLine.setAntiAlias(true);

Paint pFill = new Paint();
pFill.setColor(clr);
pFill.setStyle(Style.FILL);
Rect rect = ShipUtils.getShipRect();
int w = rect.width();
int h = rect.height();

Bitmap bitmap = Bitmap.createBitmap(w, h, Config.ARGB_4444);
Canvas canvas = new Canvas(bitmap);
Path path = new Path();
canvas.translate(w / 2, h / 2);
List<Integer> pShape = ShipUtils.getShipShape(idx * 15);

path.moveTo(pShape.get(0), pShape.get(1));
path.lineTo(pShape.get(2), pShape.get(3));
path.lineTo(pShape.get(4), pShape.get(5));
path.close();

canvas.drawPath(path, pFill);
canvas.drawPath(path, pLine);

return bitmap;
}

更多关于HarmonyOS鸿蒙Next是否支持根据绘制逻辑生成ImageData的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复 
import { image } from '@kit.ImageKit'
import { fileIo } from '@kit.CoreFileKit'

@Component
struct Demo3 {
  context: CanvasRenderingContext2D = new CanvasRenderingContext2D(new RenderingContextSettings(true))
  guessContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(new RenderingContextSettings(true))
  drawIng: boolean = false
  lastX: number = 0
  lastY: number = 0
  gLastX: number = 0
  gLastY: number = 0
  pointList: PointClass[] = []
  timer: number = -1
  imgStr: PixelMap | undefined = undefined

  drawLine(x: number, y: number) {
    this.context.moveTo(this.lastX, this.lastY)
    this.context.lineTo(x, y)
    this.lastX = x
    this.lastY = y
    this.context.stroke()
  }

  drawGuess() {
    if (this.pointList.length && this.timer === -1) {
      this.timer = setInterval(() => {
        if (this.pointList.length === 0) {
          clearInterval(this.timer)
          this.timer = -1
          return
        }
        let pt1: PointClass = this.pointList.shift() as PointClass
        this.guessLine(pt1)
      }, 100)
    }
  }

  guessLine(p: PointClass) {
    if (p.reset) {
      this.guessContext.closePath()
      this.guessContext.beginPath()
      this.gLastX = p.x
      this.gLastY = p.y
    } else {
      this.guessContext.moveTo(this.gLastX, this.gLastY)
      this.guessContext.lineTo(p.x, p.y)
      this.gLastX = p.x
      this.gLastY = p.y
      this.guessContext.stroke()
    }
  }

  transFile() {
  }

  build() {
    Scroll() {
      Column({ space: 20 }) {
        Canvas(this.context)
          .width(360)
          .height(300)
          .backgroundColor(Color.Grey)
          .onTouch((event: TouchEvent) => {
            if (event.type === TouchType.Down) {
              this.lastX = event.touches[0].x
              this.lastY = event.touches[0].y
              this.drawIng = true
              this.context.beginPath()
              this.pointList.push({ x: this.lastX, y: this.lastY, reset: true })
            }
            if (event.type === TouchType.Move) {
              if (this.drawIng) {
                this.pointList.push({ x: event.touches[0].x, y: event.touches[0].y, reset: false })
                this.drawLine(event.touches[0].x, event.touches[0].y)
              }
            }
            if (event.type === TouchType.Up) {
              this.drawIng = false
              this.context.closePath()
            }
            this.drawGuess()
          })
          .onReady(() => {
            this.context.lineWidth = 4
            this.context.strokeStyle = "blue"
          })

        Row({ space: 20 }) {
          Button("清屏")
            .onClick(() => {
              this.context.clearRect(0, 0, 360, 300)
              this.guessContext.clearRect(0, 0, 360, 300)
              this.pointList = []
            })
          Button("存储图片")
            .onClick(() => {
              this.imgStr = this.context.getPixelMap(0, 0, 360, 300)
              let packOpts: image.PackingOption = { format: "image/jpeg", quality: 98 }
              let file = fileIo.openSync(getContext(this).cacheDir + '/1.jpeg',
                fileIo.OpenMode.CREATE | fileIo.OpenMode.READ_WRITE);

              const imagePackerApi: image.ImagePacker = image.createImagePacker();
              imagePackerApi.packToFile(this.context.getPixelMap(0, 0, 360, 300), file.fd, packOpts).then(() => {
                fileIo.close(file)
              })
            })
        }

        if (this.imgStr) {
          Image(this.imgStr).width(360).height(300)
        }
      }
    }
  }
}

class PointClass {
  x: number = 0
  y: number = 0
  reset?: boolean = false
}

更多关于HarmonyOS鸿蒙Next是否支持根据绘制逻辑生成ImageData的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


HarmonyOS鸿蒙Next支持根据绘制逻辑生成ImageData。通过使用Canvas API，开发者可以在Canvas上进行绘图操作，并将绘制结果转换为ImageData对象。Canvas API提供了丰富的绘图功能，包括绘制路径、形状、文本、图像等。开发者可以使用这些功能来创建复杂的图形和图像，并将其保存为ImageData对象。

在鸿蒙Next中，Canvas API的使用方式与其他平台类似。开发者首先需要创建一个Canvas对象，然后使用Canvas的绘图方法进行绘制。绘制完成后，可以使用Canvas的toDataURL方法将绘制结果转换为ImageData对象，或者使用getImageData方法获取Canvas上的像素数据。

例如，以下代码片段展示了如何在鸿蒙Next中使用Canvas API生成ImageData：

// 创建一个Canvas对象
const canvas = new CanvasElement();
canvas.width = 200;
canvas.height = 200;

// 获取Canvas的2D上下文
const ctx = canvas.getContext('2d');

// 在Canvas上进行绘制
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 100, 100);

// 将绘制结果转换为ImageData对象
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

// 使用ImageData对象
console.log(imageData);

通过这种方式，开发者可以根据绘制逻辑生成ImageData对象，并在鸿蒙Next中进行进一步的处理或显示。

是的，HarmonyOS鸿蒙Next支持根据绘制逻辑生成ImageData。开发者可以使用Canvas组件进行自定义绘制，并通过ImageData接口获取绘制后的像素数据。具体步骤包括：创建Canvas对象，使用CanvasRenderingContext2D进行绘制，最后通过getImageData方法获取ImageData对象。这种方式适用于图像处理、像素操作等场景。

回到顶部