2021年4月27日火曜日
さくらインターネットVPS設定
2021年3月2日火曜日
fancy product designerにおけるSVGファイルにlinearGradient情報なくなる対応
linearGradient情報含まれるSVGファイルをfancy product designerに取り込むと、その情報がなくなった。原因はSVG各objectのfillを処理する際のバグ?か
ソースコードの6018行目あたり、objectのfillは、色のHexかtransparentとなるが、linearGradientの場合、fillがobjectになっている。
var color = objects[i].fill.length > 0 ? tinycolor(objects[i].fill).toHexString() : 'transparent';
params.colors.push(color);
対応するには、下記のように変更
if(typeof(objects[i].fill) !== "object") {
var color = objects[i].fill.length > 0 ? tinycolor(objects[i].fill).toHexString() : 'transparent';
params.colors.push(color);
} else {
params.colors.push('');
}
さらに、6070行目あたり
//if no default colors are set, use the initial path colors
else if(!fabricParams.fill && !fabricParams.svgFill) {
if(objects) {
params.colors = [];
for(var i=0; i < objects.length; ++i) {
if(typeof(objects[i].fill) !== "object") {
var color = objects[i].fill.length > 0 ? tinycolor(objects[i].fill).toHexString() : 'transparent';
params.colors.push(color);
} else {
params.colors.push('');
}
}
params.svgFill = params.colors;
}
fabricParams.svgFill = params.svgFill;
}
最後、7540行目あたり
//path groups (svg)
else if(element.type == FPDPathGroupName && typeof hex == 'object') {
for(var i=0; i < hex.length; ++i) {
if(element.getObjects()[i] && hex[i] !== '') {
element.getObjects()[i].set('fill', hex[i]);
}
}
fancy product designerの内容をdownload時SVG対応
fancy product designerの内容をsvgとしてdownload際、画像のsrcがリンクの場合、リンク形式で保存され、AIで開くと参照ファイルがないため、表示できない。
fancy product designerが使うfabricjsのメソッドをoverwriteする必要ある。画像のsrcがbase64形式の場合そのまま、リンクの場合DataURLとして保存する
fabric.Image.prototype.getSvgSrc = function() {
return this.toDataURLforSVG();
};
fabric.Image.prototype.toDataURLforSVG = function(options) {
var src = this._element.src;
var imageParts = src.split('.');
//base64 encodedかどうか
if(imageParts.length == 1) {
return imageParts[0];
}
// base64ではない場合、リンクの場合、base64を返す
var el = fabric.util.createCanvasElement();
el.width = this._element.naturalWidth || this._element.width;
el.height = this._element.naturalHeight || this._element.height;
el.getContext("2d").drawImage(this._element, 0, 0);
var data = el.toDataURL(options);
return data;
};
fancy product designerローカルSVG画像使用時正しく表示されない対応
fancy product designer(https://fancyproductdesigner.com/) jqueryバージョンの最新有料版を使っていますが、ローカルSVGをdesignerに入れると、正しく表示されない。
ソースには、ローカル画像をstageに入れる場合、FileReaderを使用する。
reader.readAsDataURL(file);
ここで、SVGでもDataURL形式で読み込まれる。
addElement functionで、読み込まれた結果をSVGかどうかの判断がありますが、DataURL形式のため、ただしく認識できない。
if(source.search('<svg') !== -1)
解決するには、SVGから変換されたDataURL形式なら、もとのテキストファイルに戻す。
ソースコードの5937行の後に下記追加
if(source.search(/data:image\/svg\+xml;base64,/) >= 0) {
source = atob(source.replace(/^data:image\/svg\+xml;base64,/, ''));
}