1

多亏了杜尔加（欢呼声），我最近问了这个问题并得到了有效的答案。我正在尝试将相同的东西与 Parcel.js 合并，但遇到了问题；颜色选择器本身会发生变化，让我选择一种颜色 - 但实际的绘制颜色没有改变，我得到了这个：

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)

我的代码如下所示：

索引.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>

模块.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);
    }
};

应用程序.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;
  });
});

样式.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;
}

包.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"
  }
}

我在这里做错了什么？

4

1 回答 1

1

在您的 module.js 中，将您的画布值分配给 window 对象

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

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

于 2018-07-28T14:54:00.703 回答