无法选择由 fabricjs 创建的圆形画布
Can't select circle canvas created by fabricjs
我通过fabricjs将圆圈添加到画布上,但无法选择它来更改大小。我在drawCircle方法中添加了圆圈。我的代码
function Toolbar(can) {
'use strict';
var self = this;
var canvas = can;
var $container = $('#tool-box-container');
var $toolboxItems = $container.find('div[data-act]');
$toolboxItems.click(function () {
processAction($(this).data('act'));
});
function drawLine() {
var line, isDown;
canvas.on('mouse:down', function (o) {
isDown = true;
var pointer = canvas.getPointer(o.e);
var points = [pointer.x, pointer.y, pointer.x, pointer.y];
line = new fabric.Line(points, {
strokeWidth: 5,
fill: 'red',
stroke: 'red',
originX: 'center',
originY: 'center'
});
canvas.add(line);
});
canvas.on('mouse:move', function (o) {
if (!isDown)
return;
var pointer = canvas.getPointer(o.e);
line.set({ x2: pointer.x, y2: pointer.y });
canvas.renderAll();
});
canvas.on('mouse:up', function (o) {
isDown = false;
});
}
function drawCircle() {
var circle, isDown, origX, origY;
canvas.on('mouse:down', function (o) {
isDown = true;
var pointer = canvas.getPointer(o.e);
origX = pointer.x;
origY = pointer.y;
circle = new fabric.Circle({
left: pointer.x,
top: pointer.y,
radius: 5,
strokeWidth: 3,
stroke: 'red',
fill:'',
originX: 'center', originY: 'center'
});
canvas.add(circle);
});
canvas.on('mouse:move', function (o) {
if (!isDown)
return true;
var pointer = canvas.getPointer(o.e);
circle.set({ radius: Math.abs(origX - pointer.x) });
canvas.renderAll();
});
canvas.on('mouse:up', function (o) {
isDown = false;
});
}
function processAction(action) {
switch (action) {
case 'move':
canvas.isDrawingMode = false;
canvas.selection = true;
canvas.off('mouse:down');
canvas.off('mouse:move');
canvas.off('mouse:up');
break;
case 'brush':
canvas.isDrawingMode = true;
break;
case 'pencil':
canvas.isDrawingMode = true;
break;
case 'erase':
canvas.clear();
break;
case 'image':
$('#add-image').modal('show');
break;
case 'circle':
canvas.isDrawingMode = false;
canvas.selection = false;
drawCircle();
break;
case 'square':
canvas.isDrawingMode = false;
canvas.selection = false;
drawLine();
break;
case 'text':
canvas.isDrawingMode = true;
break;
case 'back':
break;
case 'forward':
break;
}
}
}
function Paint($cont) {
'use strict';
var self = this;
var container = $cont;
var canvas = new fabric.Canvas('main-canvas', {
isDrawingMode: true
});
var toolbox = new Toolbar(canvas);
canvas.freeDrawingBrush = new fabric['PencilBrush'](canvas);
canvas.freeDrawingBrush.color = "black";
canvas.freeDrawingBrush.width = 10;
canvas.freeDrawingBrush.shadowBlur = false;
self.canvas = canvas;
self.container = container;
}
发生这种情况是因为您在将圆尺寸添加到画布后更改了圆尺寸。在mousemove
期间,您可以更改圆半径,但这不会更改其可选区域。
在鼠标向上时,调用circle.setCoords()
以重新计算圆球框
canvas.on('mouse:up', function (o) {
isDown = false;
circle.setCoords();
});
相关文章:
- 在动态创建的元素上获取对特定选择器的引用
- Jquerymobile-使用javascript创建选择菜单
- 使用peta poco ORM在MVC应用程序中创建选择列表
- 如何在外部文件中创建选择菜单并将其嵌入到html中以显示菜单
- Jquery选项卡:打破创建-选择-重新加载循环
- 在Wordpress菜单中使用锚点可以围绕内容创建选择框
- AngularJS动态创建选择框-ngModel未注册
- 从指定的字符串中读取数据以创建选择元素
- 根据选择中的选项创建选择组
- 使用 jQuery 动态创建选择框
- 使用 Knockout-classBindingProvider 创建选择
- 动态创建选择元素并从 SharePoint 列表填充选项
- 以整小时为增量创建选择列表
- 如何在Angularjs中使用按钮点击指令创建选择选项
- 如何在流星上创建选择过滤器
- 使用jQuery,如何使用页面创建选择列表's H4标题作为选项
- Jquery获取自动编号的输入值并从中创建选择框
- jQuery创建选择和设置值
- 用脚本创建选择列表
- 用于从对象中创建选择元素的Javascript插件