在此链接中，您可以看到演示。
当我放大或拖动时，对象会消失，然后一旦动画停止，它们就会变得可见。
如果我将 Fabric.js 版本更改为 1.7.0，则此问题已修复。
如何使用最新的 2.3.6 版本解决此问题？
下面是您可以在 Plunker 演示中看到的代码：
(function() {
if (!window.OpenSeadragon) {
console.error('[openseadragon-canvas-overlay] requires OpenSeadragon');
return;
}
/**
* @param {Object} options
* Allows configurable properties to be entirely specified by passing
* an options object to the constructor.
* @param {Number} options.scale
* Fabric 'virtual' canvas size, for creating objects
**/
OpenSeadragon.Viewer.prototype.fabricjsOverlay = function(options) {
this._fabricjsOverlayInfo = new Overlay(this);
this._fabricjsOverlayInfo._scale = options.scale;
return this._fabricjsOverlayInfo;
};
// static counter for multiple overlays differentiation
var counter = (function () {
var i = 1;
return function () {
return i++;
}
})();
// ----------
var Overlay = function(viewer) {
var self = this;
this._viewer = viewer;
this._containerWidth = 0;
this._containerHeight = 0;
this._canvasdiv = document.createElement( 'div');
this._canvasdiv.style.position = 'absolute';
this._canvasdiv.style.left = 0;
this._canvasdiv.style.top = 0;
this._canvasdiv.style.width = '100%';
this._canvasdiv.style.height = '100%';
this._viewer.canvas.appendChild(this._canvasdiv);
this._canvas = document.createElement('canvas');
this._id='osd-overlaycanvas-'+counter();
this._canvas.setAttribute('id', this._id);
this._canvasdiv.appendChild(this._canvas);
this.resize();
this._fabricCanvas=new fabric.Canvas(this._canvas);
// disable fabric selection because default click is tracked by OSD
this._fabricCanvas.selection=false;
// prevent OSD click elements on fabric objects
this._fabricCanvas.on('mouse:down', function (options) {
if (options.target) {
options.e.preventDefaultAction = true;
options.e.preventDefault();
options.e.stopPropagation();
}
});
this._viewer.addHandler('update-viewport', function() {
self.resize();
self.resizecanvas();
});
this._viewer.addHandler('open', function() {
self.resize();
self.resizecanvas();
});
};
// ----------
Overlay.prototype = {
// ----------
canvas: function() {
return this._canvas;
},
fabricCanvas: function() {
return this._fabricCanvas;
},
// ----------
clear: function() {
this._fabricCanvas.clearAll();
},
// ----------
resize: function() {
if (this._containerWidth !== this._viewer.container.clientWidth) {
this._containerWidth = this._viewer.container.clientWidth;
this._canvasdiv.setAttribute('width', this._containerWidth);
this._canvas.setAttribute('width', this._containerWidth);
}
if (this._containerHeight !== this._viewer.container.clientHeight) {
this._containerHeight = this._viewer.container.clientHeight;
this._canvasdiv.setAttribute('height', this._containerHeight);
this._canvas.setAttribute('height', this._containerHeight);
}
},
resizecanvas: function() {
var origin = new OpenSeadragon.Point(0, 0);
var viewportZoom = this._viewer.viewport.getZoom(true);
this._fabricCanvas.setWidth(this._containerWidth);
this._fabricCanvas.setHeight(this._containerHeight);
var zoom = this._viewer.viewport._containerInnerSize.x * viewportZoom / this._scale;
this._fabricCanvas.setZoom(zoom);
var viewportWindowPoint = this._viewer.viewport.viewportToWindowCoordinates(origin);
var x=Math.round(viewportWindowPoint.x);
var y=Math.round(viewportWindowPoint.y);
var canvasOffset=this._canvasdiv.getBoundingClientRect();
var pageScroll = OpenSeadragon.getPageScroll();
this._fabricCanvas.absolutePan(new fabric.Point(canvasOffset.left - x + pageScroll.x, canvasOffset.top - y + pageScroll.y));
}
};
})();
App = {
// ----------
init: function() {
var self = this;
var tileSource = {
Image: {
xmlns: "http://schemas.microsoft.com/deepzoom/2008",
Url: "http://openseadragon.github.io/example-images/highsmith/highsmith_files/",
Format: "jpg",
Overlap: "2",
TileSize: "256",
Size: {
Height: "9221",
Width: "7026"
}
}
};
var tileSourceIIIF = {
"@context": "http://iiif.io/api/image/2/context.json",
"@id": "https://libimages1.princeton.edu/loris/pudl0001%2F4609321%2Fs42%2F00000001.jp2",
"height": 7200,
"width": 5233,
"profile": [ "http://iiif.io/api/image/2/level2.json" ],
"protocol": "http://iiif.io/api/image",
"tiles": [{
"scaleFactors": [ 1, 2, 4, 8, 16, 32 ],
"width": 1024
}]
};
this.viewer = OpenSeadragon({
id: "contentDiv",
prefixUrl: "//cdn.jsdelivr.net/npm/openseadragon@2.3/build/openseadragon/images/",
tileSources: [{
tileSource: tileSource,
width: 1,
y: 0,
x: 0
},
{
tileSource: tileSourceIIIF,
width: 1,
y: 0,
x: 1.1
}]
});
// initialize overlay
var options = {
scale: 1000
}
var overlay = this.viewer.fabricjsOverlay(options);
// add fabric rectangle
var rect = new fabric.Rect({
left: 0,
top: 0,
fill: 'red',
width: 200,
height: 200
});
overlay.fabricCanvas().add(rect);
// add fabric circle
var circle = new fabric.Circle({
left: 1500,
top: 0,
fill: 'green',
radius: 100,
selectable: true,
action: 'gravity'
});
overlay.fabricCanvas().add(circle);
// create circle falling animation
circle.animate('top', '+=1200', {
onChange: overlay.fabricCanvas().renderAll.bind(overlay.fabricCanvas()),
duration: 2000,
easing: fabric.util.ease.easeOutBounce
});
circle.animate('scaleY', '-=.1', {
onChange: overlay.fabricCanvas().renderAll.bind(overlay.fabricCanvas()),
duration: 1000,
});
// animate circle on mouse release (try to drag circle up)
overlay.fabricCanvas().on('mouse:up', function (options) {
if (options.target&&(options.target.action=='gravity')) {
delta=overlay.fabricCanvas().height-options.target.top;
if (delta>0) {
circle.animate('top', '+='+(delta+420), {
onChange: overlay.fabricCanvas().renderAll.bind(overlay.fabricCanvas()),
duration: 2000,
easing: fabric.util.ease.easeOutBounce
});
circle.animate('scaleY', '-=.1', {
onChange: overlay.fabricCanvas().renderAll.bind(overlay.fabricCanvas()),
duration: 1000,
});
}
}
})
// add fabric circle with text
var circle2 = new fabric.Circle({
left: 930,
top: 100,
fill: 'lightgray',
radius: 120,
selectable: false,
action: 'button'
});
overlay.fabricCanvas().add(circle2);
var text = new fabric.Text('Startn drawing', {
left: 950,
top: 150,
fontSize: 50,
fontFamily: 'Helvetica',
textAlign: 'center',
fill: 'black',
selectable: false,
action: 'button'
});
overlay.fabricCanvas().add(text);
overlay.fabricCanvas().freeDrawingBrush.color='red';
overlay.fabricCanvas().freeDrawingBrush.width=30;
// start freedrawing mode
overlay.fabricCanvas().on('mouse:down', function (options) {
if (options.target&&(options.target.action=='button')) {
self.viewer.setMouseNavEnabled(false);
self.viewer.outerTracker.setTracking(false);
circle2.set('fill','lightgreen');
overlay.fabricCanvas().isDrawingMode=true;
}
});
$(window).resize(function() {
overlay.resize();
overlay.resizecanvas();
});
}
};
// ----------
$(document).ready(function() {
App.init();
});
所以问题是由于resizeCanvas函数中的以下代码造成的。
resizeCanvas: function(){
//this._fabricCanvas.setWidth(this._containerWidth);
//this._fabricCanvas.setHeight(this._containerHeight);
}
只需注释或删除这两行，因为设置的画布大小被调用了两次(在resizeCanvas之前调用了调整大小函数(。
下面是一个带有 Fabric 2.3.6 的工作触发器： https://plnkr.co/edit/q7KrucdLS7UTbnL1caXR?p=preview