Question

我最近问过this question，并感谢杜尔加（干杯）的帮助。我正在尝试将相同的内容与Parcel.js合并，并且遇到了问题； the colorpicker本身会发生变化，我可以选择一种颜色，但是实际绘制的颜色却没有变化，我得到了：

Uncaught TypeError: Cannot set property 'color' of undefined
    at HTMLInputElement.change (module.js:1)
    at Object.change (jquery.js:10365)
    at updateOriginalInput (jquery.js:10365)
    at HTMLSpanElement.paletteElementClick (jquery.js:10365)
    at HTMLDivElement.dispatch (jquery.js:4011)
    at HTMLDivElement.elemData.handle (jquery.js:3819)

我的代码如下：

index.html

<html>

<head>
    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">

</head>

<body>
    <canvas id="canvas"></canvas>
    <input type='text' id="toggle" />
<button id="btn-toggle"><i id='colorPalette' class="fas fa-palette"></i></button>
    <script src="./app.js"></script>
</body>

</html>

module.js

export const createFabric = {
    init: function () {
        // create a wrapper around native canvas element (with id="c")
        var canvas = new fabric.Canvas("canvas", {isDrawingMode: true,});

        canvas.setHeight(500);
        canvas.setWidth(500);

        // create a rectangle object
        var rect = new fabric.Rect({
            left: 100,
            top: 100,
            fill: "limegreen",
            width: 120,
            height: 120
        });

        // "add" rectangle onto canvas
        canvas.add(rect);
    }
};

app.js

import $ from "jquery";
import { fabric } from "fabric";
import  { spectrum } from "spectrum-colorpicker";
import { createFabric } from "./module";

$(function() {
createFabric.init();

// Color Picker
$("#toggle").spectrum({
    showPaletteOnly: true,
    showPalette: true,
    color: 'black',
    hideAfterPaletteSelect: true,
    palette: [
      ['black'],
      ['blue'],
      ['red']
    ],
    change: function(selectedColor) {
      //$("#colorValue").val(selectedColor);
      canvas.freeDrawingBrush.color = selectedColor.toHexString();
      $("#colorPalette").css("color", selectedColor.toHexString())
    }
  });
  $("#btn-toggle").click(function() {
    $("#toggle").spectrum("toggle");
    return false;
  });
});

style.css

@import "bulma/css/bulma.css";
@import "spectrum-colorpicker/spectrum.css";
canvas {
    border: 1px solid #dddd;
    margin-top: 10px;
}

.sp-replacer {
    display: none !important;
}

.sp-container {
    border-color: grey;
}

.sp-thumb {
    border-color: grey;
}

package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bulma": "^0.7.1",
    "fabric": "^2.3.3",
    "jquery": "^3.3.1",
    "spectrum-colorpicker": "^1.8.0"
  }
}

我在这里做什么错了？

Answer 1

在module.js中，将画布值分配给窗口对象

var canvas = window._canvas = new fabric.Canvas("canvas", {isDrawingMode: true,});

然后在app.js中使用var canvas = window._canvas;

获取画布

未捕获的TypeError：无法设置未定义的属性“颜色”

1 个答案: