Question

我要拍摄图像并将其插入光标，并在鼠标滚动时光标会缩小或增长。

我尝试通过将图像转换为base64，然后转换为光标来做到这一点，我只是在没有滚动的情况下对其进行了测试，并且它始终使黑色方形光标变为空。

    img64 = new Image();
    img64.src = './assets/tools/pencil.png';
    var cnva64 = document.createElement('canvas');
    cnva64.height = img64.naturalHeight;
    cnva64.width = img64.naturalWidth;
    var ctx64 = cnva64.getContext('2d');

    ctx64.drawImage(img64, 0, 0, cnva64.width, cnva64.height);
    var base64String = cnva64.toDataURL();
    Board.canvas.style.cursor = `url(${base64String}), auto`;

编辑

如果我是这样工作的，那是可行的，但是并没有它的大小

    img = new Image();
    img.src = './assets/tools/cursor/pencil.png';
    img.style.width = "58px";
    img.style.height = "38px";

    Board.canvas.style.cursor = `url(${img64.src}), auto`;

Answer 1

我想做自己想做的事，但后来我被chrome通知

删除与本机UI相交的大于32x32的与设备无关的像素的光标

const webpack = require('webpack');
const path = require('path');

// plugins
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // this replaces the ExtractTextPlugin
const ManifestRevisionPlugin = require('manifest-revision-webpack-plugin');

module.exports = {
  mode: 'development',

  entry: {
    // dash: ['react-hot-loader/patch','./src/index.jsx', './style/dash/index.scss'],
    // marcom: ['react-hot-loader/patch','./src/marcom.js', './style/marcom/index.scss'],
    dash: ['./src/index.jsx', './style/dash/index.scss'],
    marcom: ['./src/marcom.js', './style/marcom/index.scss'],
  },

  output: {
    path: path.join(__dirname, 'public'),
    publicPath: '/',
    filename: 'js/[name].js',
  },

  optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          name: 'common',
        },
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor',
          enforce: true,
          chunks: 'initial',
          // FIXME: do we add chunks & minChunks here?
        },
      },
    },
  },

  module: {
    rules: [
      {
        test: /\.jsx?$/, // this matches both js and jsx files
        exclude: /(node_modules|bower_components)/, // this is how babel recommends doing it
        use: [{
          loader: 'babel-loader', // the options for this are specified in .babelrc
          options: {
            plugins: [
              "transform-object-rest-spread",
              "transform-class-properties",
              // 'react-hot-loader/babel' // TODO
            ]
          }
        }]
      },
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
        ],
      },
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              includePaths: [
                path.resolve(__dirname), // FIXME: not sure if this is actually needed
              ],
            },
          },
        ],
      },
      {
        test: /\.(gif|png|jpe?g|svg)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name]-[hash].[ext]',
              outputPath: 'img/',
              publicPath: '/img/',
            },
          },
          'image-webpack-loader',
        ],
      },
    ],
  },

  plugins: [
    new webpack.DefinePlugin({
      'process.env.cm_api_host': JSON.stringify(process.env.cm_api_host || 'localhost'),
      'process.env.NODE_ENV': JSON.stringify('development'),
      'process.env.DEBUG': JSON.stringify(process.env.DEBUG || 'false')
    }),
    new MiniCssExtractPlugin({ filename: 'css/[name].css' }),
    new ManifestRevisionPlugin(path.join('assets.json'), {
      rootAssetPath: './img',
      ignorePaths: ['.DS_Store'],
      extensionsRegex: /\.(jpe?g|png|gif|svg)$/i,
    }),
  ],

  resolve: {
    modules: [
      'node_modules',
      path.resolve(__dirname, 'src'),
      path.resolve(__dirname, 'img'),
    ],
    extensions: ['.js', '.jsx', '.css', '.scss'],
    alias: {
      // 'react-dom': '@hot-loader/react-dom',
      numeral: 'numbro'
    },
  },

  node: {
    console: true,
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
  },

  devtool: false,

  context: __dirname,
};

如何使光标缩小和增长？

1 个答案: