- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
任何显示 ClipTo 序列化的 jsfiddle 示例的指导将不胜感激?当前的 ToJSON 函数在尝试序列化剪切的对象时不起作用。请参阅代码底部的 ToJSON 实现。
JSFiddle 链接:http://jsfiddle.net/PromInc/ZxYCP/
var img01URL = 'https://www.google.com/images/srpr/logo4w.png';
var img02URL = 'http://fabricjs.com/lib/pug.jpg';
var canvas = new fabric.Canvas('c');
// Note the use of the `originX` and `originY` properties, which we set
// to 'left' and 'top', respectively. This makes the math in the `clipTo`
// functions a little bit more straight-forward.
var clipRect1 = new fabric.Rect({
originX: 'left',
originY: 'top',
left: 180,
top: 10,
width: 200,
height: 200,
fill: '#DDD', /* use transparent for no fill */
strokeWidth: 0,
selectable: false
});
// We give these `Rect` objects a name property so the `clipTo` functions can
// find the one by which they want to be clipped.
clipRect1.set({
clipFor: 'pug'
});
canvas.add(clipRect1);
var clipRect2 = new fabric.Rect({
originX: 'left',
originY: 'top',
left: 10,
top: 10,
width: 150,
height: 150,
fill: '#DDD', /* use transparent for no fill */
strokeWidth: 0,
selectable: false
});
// We give these `Rect` objects a name property so the `clipTo` functions can
// find the one by which they want to be clipped.
clipRect2.set({
clipFor: 'logo'
});
canvas.add(clipRect2);
function findByClipName(name) {
return _(canvas.getObjects()).where({
clipFor: name
}).first()
}
// Since the `angle` property of the Image object is stored
// in degrees, we'll use this to convert it to radians.
function degToRad(degrees) {
return degrees * (Math.PI / 180);
}
var clipByName = function (ctx) {
this.setCoords();
var clipRect = findByClipName(this.clipName);
var scaleXTo1 = (1 / this.scaleX);
var scaleYTo1 = (1 / this.scaleY);
ctx.save();
var ctxLeft = -( this.width / 2 ) + clipRect.strokeWidth;
var ctxTop = -( this.height / 2 ) + clipRect.strokeWidth;
var ctxWidth = clipRect.width - clipRect.strokeWidth;
var ctxHeight = clipRect.height - clipRect.strokeWidth;
ctx.translate( ctxLeft, ctxTop );
ctx.rotate(degToRad(this.angle * -1));
ctx.scale(scaleXTo1, scaleYTo1);
ctx.beginPath();
ctx.rect(
clipRect.left - this.oCoords.tl.x,
clipRect.top - this.oCoords.tl.y,
clipRect.width,
clipRect.height
);
ctx.closePath();
ctx.restore();
}
var pugImg = new Image();
pugImg.onload = function (img) {
var pug = new fabric.Image(pugImg, {
angle: 45,
width: 500,
height: 500,
left: 230,
top: 50,
scaleX: 0.3,
scaleY: 0.3,
clipName: 'pug',
clipTo: function(ctx) {
return _.bind(clipByName, pug)(ctx)
}
});
canvas.add(pug);
};
pugImg.src = img02URL;
var logoImg = new Image();
logoImg.onload = function (img) {
var logo = new fabric.Image(logoImg, {
angle: 0,
width: 550,
height: 190,
left: 50,
top: 50,
scaleX: 0.25,
scaleY: 0.25,
clipName: 'logo',
clipTo: function(ctx) {
return _.bind(clipByName, logo)(ctx)
}
});
canvas.add(logo);
};
logoImg.src = img01URL;
//convert to json
var serialized=JSON.stringify(canvas);
canvas.clear();
canvas.loadFromDatalessJSON(serialized);
alert(serialized);
最佳答案
fabricjs clipTo
默认情况下应该包含在 Canvas 的 json 表示中。
因此,如果您使用 toJSON
,您将在包含 clipTo 函数的 Canvas 的 json 表示中找到一个 clipTo
字段。
这是一个demo .
关于fabricjs - Fabric .js : How to serialize clipTo objects since ToJSON does not work for it?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38733558/
我有一个简单的脚本,例如: fabric.Image.fromURL(url, function(oImg) { oImg.set({selectable:false})
即使我在 http://fabricjs.com/kitchensink 上尝试过,loadFromJSON 也无法使用 clipto 参数作为演示给出。 对象在 Canvas 上也显示为圆形,但是当
我目前正在将 Fabric.js 用于 Web 应用程序,该应用程序允许用户以结构化方式输入和操作 Canvas 对象。 我们提供结构的机制之一是具有“边界框”,用户可以在其中放置图像。将图像放入其中
我正在使用 canvas.clipTo 为我的整个 Canvas 创建一个基于 SVG 的“图像蒙版”,如 fabric.js 的创建者@kangax 所述,in this stackoverflow
clipTo 函数自 2.0 起已被弃用,是否有任何替代品或该功能刚刚被删除? 最佳答案 他们仍在努力(Clipping API) https://github.com/fabricjs/fabric
我的代码是 canvas.clipTo = function (ctx) { ctx.beginPath(); for (var i = 0; i < totalPrintArea;
loadFromJson 采用 3 个参数,第 3 个参数是应用于每个加载对象的函数。如何将 ClipTo 函数应用于加载的每个图像? 我尝试过这个: this.canvas.load
我使用fabric.js。我使用“clipto”功能来裁剪图像,但在fabric.js 1.7以上版本中不起作用。 当我包含 1.6.7 或更低版本时,它运行良好。 https://jsfiddle.
如何将 clipTo 用于图像或 SVG?我想限制任何对象超出 SVG 形状轮廓/图像轮廓。 我正在尝试完成类似于 this OP 的事情,但是我似乎并不清楚如何实现这一目标。 我可以将 clipTo
我想在我的 Fabric-powered Canvas 中设置一个全局 clipTo,这将影响所有用户添加的图层。我想要一个不受此剪辑蒙版影响的背景图像和叠加图像。 例子: 这是这张照片中发生的事情:
任何显示 ClipTo 序列化的 jsfiddle 示例的指导将不胜感激?当前的 ToJSON 函数在尝试序列化剪切的对象时不起作用。请参阅代码底部的 ToJSON 实现。 JSFiddle 链接:h
我是一名优秀的程序员,十分优秀!