文章/答案/技术大牛

发布

问Fabric JS自定义光标样式
EN

Stack Overflow用户

提问于 2016-11-30 14:09:43

回答 4查看 15.6K关注 0票数 5

我需要将光标类型更改为悬停形状上的“手写”...

var canvas = window._canvas = new fabric.Canvas('ImgCanvas');
function changeCursor(cursorType) {
canvas.defaultCursor = "Handwriting";
}

我试过了，但不起作用

javascript

html

html5-canvas

fabricjs

回答 4

Stack Overflow用户

回答已采纳

发布于 2016-11-30 22:02:13

可以将hoverCursor直接更改为单个形状，也可以全局更改为整个画布。请看下面的代码片段。

var canvas = this.__canvas = new fabric.Canvas('c');
// pointer for all
canvas.hoverCursor = 'pointer';

var rect = new fabric.Rect({
  left: 50,
  top: 30,
  width: 100,
  height: 100,
  fill: 'green',
  angle: 20,
});
var rect2 = new fabric.Rect({
  left: 180,
  top: 30,
  width: 100,
  height: 100,
  fill: 'green',
  angle: 20,
});
canvas.add(rect);
canvas.add(rect2);
canvas.renderAll();

var canvas2 = this.__canvas = new fabric.Canvas('c2');
var rect = new fabric.Rect({
  left: 120,
  top: 30,
  width: 100,
  height: 100,
  fill: 'green',
  angle: 20,
  // pointer for the selected shape
  hoverCursor: "pointer"
});
canvas2.add(rect);
canvas2.renderAll();

p{font-family:'arial'}

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>

<p>Applied Globally</p>
<canvas height=200 width=300 id="c" style="border:1px solid black"></canvas>

<p>Applied individually</p>
<hr/>
<canvas height=200 width=300 id="c2" style="border:1px solid black"></canvas>

票数 7

Stack Overflow用户

发布于 2016-11-30 22:44:53

苏伦达尔

要更改形状上的光标，您需要定义为：

canvas.hoverCursor = 'cursor type'

这是游标的list

如果您需要自定义光标，则必须使用自定义光标在fabric canvas上创建div元素。当你有'mouseover‘事件时，形状就会指定canvas.hoverCursor = 'none'，并显示自定义事件。

你可以查看这个fiddle，它是一个简单的自定义游标示例。您必须重新访问此代码才能在不刷新自定义游标的情况下工作。这都是关于自定义光标的鼠标悬停事件。您必须禁用自定义光标的每个div元素的鼠标悬停事件。

票数 6

Stack Overflow用户

发布于 2019-04-01 20:44:15

要更改fabric.js对象的光标，可以将hoverCursor或moveCursor设置为您自己的图像。例如：

object.set({hoverCursor: 'url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/happy.png"), auto'});

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/40881471

复制

相似问题

问Fabric JS自定义光标样式
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Fabric JS自定义光标样式EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Fabric JS自定义光标样式
EN