织物js中图像的自定义控制图标
织物js中图像的自定义控制图标
提问于 2018-10-09 10:06:34
此代码在fabric js版本1.5中运行良好，但在最新的fabric版本2.4.0中不起作用。它引发以下错误: Uncaught :无法读取未定义和未定义的TypeError的属性“火”：无法读取undefined.Please的属性“片段”引用此小提琴链接(https://codepen.io/elhoussinelaidi/pen/RRrLzv)，这是在fabric版本1.5中编写的，但我希望此功能在fabric版本2.4中运行良好。请任何人帮助我解决这个问题。
<!DOCTYPE html>
<html>
<head>
<title>Custom Control</title>
<script src="https://static.filestackapi.com/v3/filestack.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.0/fabric.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id="canvas-container" class="over">
<div class="canvas-container" style="width: 800px; height: 600px; position: relative; -webkit-user-select: none;">
<canvas id="canvas" width="400" height="300"></canvas>
</div>
</div>
<script type="text/javascript">
var canvas = new fabric.Canvas('canvas');
var DIMICON = 15;
var HideControls = {
'tl': true,
'tr': true,
'bl': true,
'br': true,
'ml': false,
'mt': false,
'mr': false,
'mb': false,
'mtr': false
};
var dataImage = [
"https://cdn1.iconfinder.com/data/icons/streamline-interface/60/cell-8-10-120.png", /*scale*/
"https://cdn1.iconfinder.com/data/icons/ui-color/512/Untitled-12-128.png", /*delete*/
"https://cdn2.iconfinder.com/data/icons/social-messaging-productivity-1/128/sync-16.png", /*rotate*/
"https://cdn2.iconfinder.com/data/icons/social-messaging-productivity-1/128/write-compose-16.png", /*change text*/
"https://cdn3.iconfinder.com/data/icons/social-messaging-productivity-1/128/save-16.png" /*save*/
];
//********override*****//
fabric.Object.prototype._drawControl = function(control, ctx, methodName, left, top,styleOverride) {
if (!this.isControlVisible(control)) {
return;
}
var SelectedIconImage = new Image();
var size = this.cornerSize;
/* fabric.isVML() ||*/
this.transparentCorners || ctx.clearRect(left, top, size, size);
switch (control) {
case 'tl':
/*delete*/
SelectedIconImage.src = dataImage[1];
break;
case 'tr':
/*scale*/
SelectedIconImage.src = dataImage[0];
break;
case 'bl':
/*scale*/
SelectedIconImage.src = dataImage[0];
break;
case 'br':
/*rotate*/
SelectedIconImage.src = dataImage[2];
break;
default:
ctx[methodName](left, top, size, size);
}
if (control == 'tl' || control == 'tr' || control == 'bl' || control == 'br') {
try {
ctx.drawImage(SelectedIconImage, left, top, DIMICON, DIMICON);
} catch (e) {
ctx[methodName](left, top, size, size);
}
}
}
//override prorotype _setCornerCursor to change the corner cusrors
fabric.Canvas.prototype._setCornerCursor = function(corner, target) {
if (corner === 'mtr' && target.hasRotatingPoint) {
this.setCursor(this.rotationCursor);
} else if (corner == "tr" || corner == "bl") {
this.setCursor('sw-resize');
} else if (corner == "tl" || corner == "br") {
this.setCursor('pointer');
}
else {
this.setCursor(this.defaultCursor);
return false;
}
};
fabric.Canvas.prototype._getActionFromCorner = function(target, corner) {
var action = 'drag';
if (corner) {
switch (corner) {
case 'ml':
case 'mr':
action = 'scaleX';
break;
case 'mt':
case 'mb':
action = 'scaleY';
break;
case 'mtr':
action = 'rotate';
break;
/**ADD **/
case 'br':
action = 'rotate';
break;
case 'tl': //delete function if mouse down
action = 'delete';
canvas.remove(canvas.getActiveObject());
break;
default:
action = 'scale';
}
return action;
}
}
fabric.Canvas.prototype._performTransformAction = function(e, transform, pointer) {
var x = pointer.x,
y = pointer.y,
target = transform.target,
action = transform.action;
if (action === 'rotate') {
this._rotateObject(x, y);
this._fire('rotating', target, e);
} else if (action === 'scale') {
this._onScale(e, transform, x, y);
this._fire('scaling', target, e);
} else if (action === 'scaleX') {
this._scaleObject(x, y, 'x');
this._fire('scaling', target, e);
} else if (action === 'scaleY') {
this._scaleObject(x, y, 'y');
this._fire('scaling', target, e);
}
/**ADD**/
else if (action === 'delete') {
//do nothing, because here function executed when mouse moves
}
/**ADD END**/
else {
this._translateObject(x, y);
this._fire('moving', target, e);
this.setCursor(this.moveCursor);
}
}
fabric.Image.fromURL('http://serio.piiym.net/CVBla/txtboard/thumb/1260285874089s.jpg', function(img) {
img.top = 0;
img.left = 0;
img.setControlsVisibility(HideControls);
canvas.add(img);
});
canvas.renderAll();
</script>
</body>
</html>回答 1
Stack Overflow用户
回答已采纳
发布于 2018-10-09 11:05:27
您需要在这里修改fabric.Canvas.prototype._performTransformAction和fabric.Canvas.prototype._getActionFromCorner到2.4 fabric版本检查：https://codepen.io/anon/pen/WaRaed您也可以将这用于自定义控件
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52718406
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号