为什么我不能在Konva.Shape.fillPatternImage(imageObj)中使用Konva.Image()?

问题描述

以下是 Konvajs 库中加载图像的示例:

The following is an example from Konvajs library to load an image:

var imageObj = new Image();
imageObj.onload = function() {

  var yoda = new Konva.Image({
    x: 50,
    y: 50,
    image: imageObj,
    width: 106,
    height: 118
});

  And here is my code

  

  var annotation = new Konva.Line({
    points: this.contour,
    stroke: color,
    closed: true,
    strokeWidth: 1
});
  var nativeImageObject = new Image();
  nativeImageObject.onload = function() {
      var konvaImage = new Konva.Image({
        image: nativeImageObject
    });
      annotation.fillPatternImage(konvaImage);   
          DentalChart.Pattern.customPatternImages.push(customPatternImage);
      gridLayer.add(annotation);
      stage.draw();
  };
  nativeImageObject.src = pattern.toDataURL();
  nativeImageObject.id = patternEnum + '' + color;

  

为什么继续记录未捕获的TypeError:无法在'CanvasRenderingContext2D'上执行'createPattern':提供的值不是'(HTMLImageElement或HTMLVideoElement或HTMLCanvasElement或ImageBitmap)类型的

Why it keep logging Uncaught TypeError: Failed to execute 'createPattern' on 'CanvasRenderingContext2D': The provided value is not of type '(HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap)'

  Call Stack Trace:

  console.trace()
  (anonymous function) @ VM11965:1evaluate @ (program):493
  InjectedScript._evaluateOn @ VM11739:875
  InjectedScript._evaluateAndWrap @ VM11739:808InjectedScript.evaluateOnCallFrame @ VM11739:933
  Konva.Context.createPattern @ konva.js:1805Konva.SceneContext._fillPattern @ konva.js:1987
  Konva.SceneContext._fill @ konva.js:2045Konva.Context.fillStrokeShape @ konva.js:1635
  Konva.Line._sceneFunc @ konva.js:12613Konva.Util.addMethods.drawScene @ konva.js:7997
  (anonymous function) @ konva.js:7675Konva.Collection.each @ konva.js:664
  Konva.Util.addMethods._drawChildren @ konva.js:7674
  Konva.Util.addMethods.drawScene @ konva.js:7629
  Konva.Util.addMethods.drawScene @ konva.js:10363
  (anonymous function) @ konva.js:7675
  Konva.Collection.each @ konva.js:664
  Konva.Util.addMethods._drawChildren @ konva.js:7674
  Konva.Util.addMethods.drawScene @ konva.js:7629
  Konva.Util.addMethods.draw @ konva.js:3799
  Konva.Util.addMethods.draw @ konva.js:9337(anonymous function) @ DentalChartLib.js:132DentalChart.Pattern.getCustomPattern.nativeImageObject.onload @ DentalChartLib.js:617
  undefined

推荐答案

对于fillPatternImage，请使用本机Image对象.

For fillPatternImage use native Image object.

http://konvajs.github.io/docs/styling/Fill.html

这篇关于为什么我不能在Konva.Shape.fillPatternImage(imageObj)中使用Konva.Image()?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！