I am trying to generate svg file of graph generated by highcharts-export-server after generation i want to add it to pdf which is generated by pdfkit with the help of svg-to-pdfkit.
I works when when we mannually copies the data from svg file and stores it to some variable but it does not work when we read same data from svg file
const fs = require("fs");
const chartExporter = require("highcharts-export-server");
const SVGtoPDF=require("svg-to-pdfkit")
const readline = require('readline');
const PDFDocument=require('pdfkit')
const doc = new PDFDocument({size: 'A4'});
doc.pipe(fs.createWriteStream('output.pdf'));
//svg contains data which is manually copied from svg file
const svg = `<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="highcharts-root" style="font-family:"Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;font-size:12px;" xmlns="http://www.w3.org/2000/svg" width="600" height="400"><desc>Created with Highcharts 8.2.2</desc><defs><clipPath id="highcharts-xyyrba3-9-"><rect x="0" y="0" width="518" height="276" fill="none"></rect></clipPath><clipPath id="highcharts-xyyrba3-13-"><rect x="0" y="0" width="518" height="276" fill="none"></rect></clipPath></defs><rect fill="#ffffff" class="highcharts-background" x="0" y="0" width="600" height="400" rx="0" ry="0"></rect><rect fill="none" class="highcharts-plot-background" x="72" y="47" width="518" height="276"></rect><g class="highcharts-pane-group" data-z-index="0"></g><g class="highcharts-grid highcharts-xaxis-grid" data-z-index="1"><path fill="none" data-z-index="1" class="highcharts-grid-line" d="M 160.5 47 L 160.5 323" opacity="1"></path><path fill="none" data-z-index="1" class="highcharts-grid-line" d="M 330.5 47 L 330.5 323" opacity="1"></path><path fill="none" data-z-index="1" class="highcharts-grid-line" d="M 500.5 47 L 500.5 323" opacity="1"></path></g><g class="highcharts-grid highcharts-yaxis-grid" data-z-index="1"><path fill="none" stroke="#e6e6e6" stroke-width="1" data-z-index="1" class="highcharts-grid-line" d="M 72 323.5 L 590 323.5" opacity="1"></path><path fill="none" stroke="#e6e6e6" stroke-width="1" data-z-index="1" class="highcharts-grid-line" d="M 72 268.5 L 590 268.5" opacity="1"></path><path fill="none" stroke="#e6e6e6" stroke-width="1" data-z-index="1" class="highcharts-grid-line" d="M 72 213.5 L 590 213.5" opacity="1"></path><path fill="none" stroke="#e6e6e6" stroke-width="1" data-z-index="1" class="highcharts-grid-line" d="M 72 157.5 L 590 157.5" opacity="1"></path><path fill="none" stroke="#e6e6e6" stroke-width="1" data-z-index="1" class="highcharts-grid-line" d="M 72 102.5 L 590 102.5" opacity="1"></path><path fill="none" stroke="#e6e6e6" stroke-width="1" data-z-index="1" class="highcharts-grid-line" d="M 72 46.5 L 590 46.5" opacity="1"></path></g><rect fill="none" class="highcharts-plot-border" data-z-index="1" x="72" y="47" width="518" height="276"></rect><g class="highcharts-axis highcharts-xaxis" data-z-index="2"><path fill="none" class="highcharts-tick" stroke="#ccd6eb" stroke-width="1" d="M 160.5 323 L 160.5 333" opacity="1"></path><path fill="none" class="highcharts-tick" stroke="#ccd6eb" stroke-width="1" d="M 330.5 323 L 330.5 333" opacity="1"></path><path fill="none" class="highcharts-tick" stroke="#ccd6eb" stroke-width="1" d="M 500.5 323 L 500.5 333" opacity="1"></path><path fill="none" class="highcharts-axis-line" stroke="#ccd6eb" stroke-width="1" data-z-index="7" d="M 72 323.5 L 590 323.5"></path></g><g class="highcharts-axis highcharts-yaxis" data-z-index="2"><text x="26" data-z-index="7" text-anchor="middle" transform="translate(0,0) rotate(270 26 185)" class="highcharts-axis-title" style="color:#666666;fill:#666666;" y="185"><tspan>Values</tspan></text><path fill="none" class="highcharts-axis-line" data-z-index="7" d="M 72 47 L 72 323"></path></g><g class="highcharts-series-group" data-z-index="3"><g class="highcharts-series highcharts-series-0 highcharts-column-series highcharts-color-0" data-z-index="0.1" opacity="1" transform="translate(72,47) scale(1 1)" clip-path="url(#highcharts-xyyrba3-13-)"><rect x="47.5" y="55.5" width="82" height="221" fill="#7cb5ec" stroke="#ffffff" stroke-width="1" opacity="1" class="highcharts-point highcharts-color-0"></rect><rect x="217.5" y="232.5" width="82" height="44" fill="#7cb5ec" stroke="#ffffff" stroke-width="1" opacity="1" class="highcharts-point highcharts-color-0"></rect><rect x="388.5" y="166.5" width="82" height="110" fill="#7cb5ec" stroke="#ffffff" stroke-width="1" opacity="1" class="highcharts-point highcharts-color-0"></rect></g><g class="highcharts-markers highcharts-series-0 highcharts-column-series highcharts-color-0" data-z-index="0.1" opacity="1" transform="translate(72,47) scale(1 1)" clip-path="none"></g></g><text x="300" text-anchor="middle" class="highcharts-title" data-z-index="4" style="color:#333333;font-size:18px;fill:#333333;" y="24"><tspan>Heading of Chart</tspan></text><text x="300" text-anchor="middle" class="highcharts-subtitle" data-z-index="4" style="color:#666666;fill:#666666;" y="46"></text><text x="10" text-anchor="start" class="highcharts-caption" data-z-index="4" style="color:#666666;fill:#666666;" y="397"></text><g class="highcharts-legend" data-z-index="7" transform="translate(255,358)"><rect fill="none" class="highcharts-legend-box" rx="0" ry="0" x="0" y="0" width="91" height="27" visibility="visible"></rect><g data-z-index="1"><g><g class="highcharts-legend-item highcharts-column-series highcharts-color-0 highcharts-series-0" data-z-index="1" transform="translate(8,3)"><text x="21" style="color:#333333;cursor:pointer;font-size:12px;font-weight:bold;fill:#333333;" text-anchor="start" data-z-index="2" y="15"><tspan>Series 1</tspan></text><rect x="2" y="4" width="12" height="12" fill="#7cb5ec" rx="6" ry="6" class="highcharts-point" data-z-index="3"></rect></g></g></g></g><g class="highcharts-axis-labels highcharts-xaxis-labels" data-z-index="7"><text x="160.60526315789" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" y="342" opacity="1">0</text><text x="331" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" y="342" opacity="1">1</text><text x="501.39473684211" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" y="342" opacity="1">2</text></g><g class="highcharts-axis-labels highcharts-yaxis-labels" data-z-index="7"><text x="57" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="end" transform="translate(0,0)" y="327" opacity="1">0</text><text x="57" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="end" transform="translate(0,0)" y="271" opacity="1">25</text><text x="57" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="end" transform="translate(0,0)" y="216" opacity="1">50</text><text x="57" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="end" transform="translate(0,0)" y="161" opacity="1">75</text><text x="57" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="end" transform="translate(0,0)" y="106" opacity="1">100</text><text x="57" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="end" transform="translate(0,0)" y="51" opacity="1">125</text></g><text x="590" class="highcharts-credits" text-anchor="end" data-z-index="8" style="cursor:pointer;color:#999999;font-size:9px;fill:#999999;" y="395">Highcharts.com</text></svg>`;
// Initialize the exporter
chartExporter.initPool();
// Chart details object specifies chart type and data to plot
const chartDetails = {
type: "image/svg+xml",
options: {
chart: {
type: "column"
},
title: {
text: "Heading of Chart"
},
plotOptions: {
pie: {
dataLabels: {
enabled: true,
format: "<b>{point.name}</b>: {point.y}"
}
}
},
series: [
{
data: [
{
name: "a",
y: 100
},
{
name: "b",
y: 20
},
{
name: "c",
y: 50
}
]
}
]
}
};
chartExporter.export(chartDetails, (err, res) => {
if (res.filename) {
let svgString = fs.readFileSync(res.filename, 'utf8');
console.log(svgString);
SVGtoPDF(doc,``+svgString, 0,0);
// Remove the file optionally
fs.unlinkSync(res.filename);
}
chartExporter.killPool();
});
doc.end();
i want to create an api which will return pdf document for that i have created a function which contains code for different pages of pdf
const pdf=()=>{
first();
generateGraph(); //this will contain highchart export server which will export graph as svg and again by reading it it will saved in pdf;
... code for other pages of pdf
return doc;
}
i am using hapijs for developement and all the installation is local and for now i am running code on localhost
i think document is returning before execution of chartExporter.export function
Related
I have the following requirement and can't find the right way in.
A maximum of 5 icons from a list of icons should be displayed.
At the start, the first icon from the list should be in the middle of the container.
With left arrow button click, the next icon is placed in the middle and the first moves to the left.
At the end of the list, the last icon remains in the middle. The icons to the right and left of the center should be smaller than the icon in the center.
Start:
Middle:
End:
The pathview works so far, the icons come from a c++ class and are displayed via the delegate.
I have the path block from an example, but it won't fit directly to this and I don't understand yet what exactly is defined here.
Do I need maybe 5 PathAttribute blocks and 4 PathLine? How do i start with the first icon in the middle? How can I change the size of the icons depending on their position and how can I get them closer together
I would be very happy about any help to get started
Coverflow.qml
Rectangle {
id: root
height: 200
width: 400
Layout.preferredHeight: height
Layout.preferredWidth: width
color: "white"
PathView {
id: view
anchors.fill: parent
pathItemCount: 5
model: m_screen.coverflowModel
delegate: CoverflowDelegate { height: view.height; width: view.height; p_icon: icon; p_z: PathView.iconOrder }
path: Path {
startX: 0; startY: view.height/2
PathAttribute { name: "iconScale"; value: 0.6 }
PathAttribute { name: "iconOpacity"; value: 0.9 }
PathAttribute { name: "angle"; value: 90}
PathLine {x: view.width / 2; y: view.height/2 }
PathAttribute { name: "iconScale"; value: 1 }
PathAttribute { name: "iconOpacity"; value: 1 }
PathAttribute { name: "angle"; value: 0 }
PathLine {x: view.width; y: view.height/2 }
PathAttribute { name: "itemScale"; value: 0.6 }
PathAttribute { name: "itemOpacity"; value: 0.9 }
PathAttribute { name: "angle"; value: -90 }
}
}
}
CoverflowDelegate.qml
Item {
id: delegate
property string p_icon
property string p_source: (!p_icon || p_icon.length === 0) ? "" : "image://iconprovider/" + p_icon
property int p_z
Rectangle {
color: "lightgrey"
width: 70; height: 70
radius: 10
z: p_z
Image {
anchors.centerIn: parent
source: p_source
sourceSize.width: parent.width * 0.8
}
}
}
You could mock this up with a ListView + Button. We can configure the ListView with:
height: 120
width: 600 // i.e. height * 5
orientation: ListView.Horizontal
currentIndex: Math.round(2 + (contentX / 120))
snapMode: ListView.SnapToItem
The ListView will take care of the horizontal scrolling and snapping to item to create a clean animation and user experience.
Add 4 dummy records to the ListModel so that we can hide the left 2 and right 2 delegates.
import QtQuick
import QtQuick.Controls
Page {
ListView {
anchors.centerIn: parent
width: height * 5
height: 120
clip: true
model: MyListModel { id: listModel }
currentIndex: Math.min(listModel.count - 1 , Math.round(2 + (contentX / height)))
orientation: ListView.Horizontal
snapMode: ListView.SnapToItem
delegate: MyDelegate { }
}
}
// MyDelegate.qml
import QtQuick
import QtQuick.Controls
Item {
property ListView listView: ListView.view
property bool isCurrentItem: ListView.isCurrentItem
property int dist: Math.abs(listView.width / 2 + listView.contentX - (x + width / 2))
width: height
height: listView.height
Button {
anchors.centerIn: parent
visible: !dummy
width: parent.height / (1 + dist * 0.002)
height: width
background: Rectangle {
radius: 10
border.color: "#888"
color: isCurrentItem ? "#ccc" : "#eee"
}
icon.source: ico
icon.width: parent.width * .6
icon.height: parent.height * .6
icon.color: isCurrentItem ? "black" : "#888"
Label {
anchors.horizontalCenter: parent.horizontalCenter
y: parent.height * 3 / 4
text: nam
visible: !dummy
color: "#08f"
z: 2
}
}
}
// MyListModel.qml
import QtQuick
import QtQuick.Controls
ListModel {
Component.onCompleted: {
append( { nam: "", ico: "", val: -1, dummy: true } );
append( { nam: "", ico: "", val: -1, dummy: true } );
append( { nam: "One", ico: "target.svg", val: 1 } );
append( { nam: "Two", ico: "pencil.svg", val: 2 } );
append( { nam: "Three", ico: "monitor.svg", val: 3 } );
append( { nam: "Four", ico: "target.svg", val: 4 } );
append( { nam: "Five", ico: "pencil.svg", val: 5 } );
append( { nam: "Six", ico: "monitor.svg", val: 6 } );
append( { nam: "Seven", ico: "target.svg", val: 7 } );
append( { nam: "Eight", ico: "pencil.svg", val: 8 } );
append( { nam: "", ico: "", val: -1, dummy: true } );
append( { nam: "", ico: "", val: -1, dummy: true } );
}
}
// target.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<circle cx="16" cy="16" r="8" stroke="black" stroke-width="1" fill="none" />
<path stroke="black" stroke-width="0.5" fill="black" d="M 16 12 L 15 11 L 15 6 L 17 6 L 17 11 z" />
<path stroke="black" stroke-width="0.5" fill="black" d="M 20 16 L 21 15 L 26 15 L 26 17 L 21 17 z"/>
<path stroke="black" stroke-width="0.5" fill="black" d="M 16 20 L 17 21 L 17 26 L 15 26 L 15 21 z "/>
<path stroke="black" stroke-width="0.5" fill="black" d="M 12 16 L 11 17 L 6 17 L 6 15 L 11 15 z"/>
</svg>
// monitor.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<rect stroke="black" fill="none" x="5" y="7" width="22" height="14" rx="1"/>
<path stroke="black" stroke-width="0.1" fill="black" d="M 2 23 L 30 23 L 30 24 L 29 25 L 3 25 L 2 24 z L 14 23.5 L 14 24.5 L 18 24.5 L 18 23.5 L 14 23.5"/>
<path stroke="black" stroke-width="0.1" fill="black" d="M 22 13 L 23 13 L 23 15 L 10 15 L 10 15.8 L 8 14.5 L 10 13.2 L 10 14 L 22 14 z
"/>
</svg>
// pencil.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<path stroke="black" stroke-width="1" fill="transparent" d="M 24 18 L 24 25
A 1 1 0 0 1 23 26 L 5 26 A 1 1 0 0 1 4 25 L 4 7 A 1 1 0 0 1 5 6 L 23 6 A 1 1 0 0 1 24 7 L 24 10"/>
<path stroke="black" stroke-width="0.5" fill="black" d="M 27 13 L 25 11 L 26 10 A 1 1 0 0 1 27 10 L 28 11 A 1 1 0 0 1 28 12 z
"/>
<path stroke="black" stroke-width="0.5" fill="black" d="M 26 14 L 21 19 L 19 17 L 24 12 z"/>
<path stroke="black" stroke-width="0.5" fill="transparent" d="M 21 19 L 20 20 L 18 20 L 18 18 L 19 17" />
<rect x="18" y="19" width="1" height="1" fill="black"/>
</svg>
You can Try it Online!
I have an SVG on my website that displays text along a path. This works everywhere except on iOS devices. Here the text is duplicated below the paths. See the image below for what I mean by "duplicated". Any idea on why Safari behaves strangely here? If you need more information about the code let me know. The tspans at the bottom simply have a string inside them
<g>
{/* Line connecting the start of the arc with the fairy icon */}
{index >= 5 && last && <line stroke='#fff' strokeWidth="2" x1={fairyPos?.[0]} y1={fairyPos?.[1]} x2={x} y2={y} />}
{/* Rotate the whole group by 90deg in order to initially hide it */}
<g className="-rotate-90" style={{ transform: `rotate(${rotation}deg)` }}>
{/* Gradient along the path */}
<defs>
<linearGradient id={`gradient${index}`}>
<stop offset="0%" stopColor={fairyGradient?.[0]} />
<stop offset="100%" stopColor={fairyGradient?.[1]} />
</linearGradient>
</defs>
{/* Border around the arc */}
<path id={`msg${index}`} d={arc} fill="none" stroke="#fff" strokeWidth={width} strokeLinecap="round" className="drop-shadow-[4px_4px_0_rgba(0,0,0,0.25)]" />
{/* Arc container of the message */}
<path d={arc} stroke={`url(#gradient${index})`} strokeWidth={width - 4} strokeLinecap="round" fill='none' />
{/* Circle at the start of the arc */}
<circle cx={arcStart[0]} cy={arcStart[1]} r={width / 2 - 1} fill={`url(#gradient${index})`} stroke="#fff" strokeWidth="2" />
{/* Text inside the arc */}
<text color="#446688" fontSize="12px" fontFamily="'Kiwi Maru'" className="text-outline-light">
<textPath startOffset={width / 2 - 1 + 5} xlinkHref={`#msg${index}`}>
<tspan x="0" alignmentBaseline={lines > 1 ? "before-edge" : "central"} dy={lines > 1 ? -(width / 2) + 4 : -1} >{text[0]}</tspan>
{text.length > 1 && text.slice(1).map((v, i) => <tspan key={index + '-' + i} x="0" alignmentBaseline="before-edge" dy="1em">{v}</tspan>)}
</textPath>
</text>
</g>
</g>
Figured it out after individually deleting every single property on my svg elements.
The problem was the className="text-outline-light" on the <text> element. The class was used for text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; and apparently Safari doesn't like it, if you define more than one shadow at once.
I deleted that class and used paintOrder="stroke" stroke="#fff" strokeWidth="1.5", which seems a bit better to use anyways.
I'm struggling with the proper navigation and experience a crash, once I go back to the Main-Site. That happens on my iOS device and the virtual devices.
My structure is as follows:
Dependencies in my package.json:
"dependencies": {
"#nativescript/core": "7.1.3",
"#nativescript/theme": "3.0.1",
"#nstudio/nativescript-cardview": "2.0.1",
"axios": "^0.19.2",
"js-cookie": "^2.2.1",
"kinvey-nativescript-sdk": "6.0.0",
"moment": "^2.24.0",
"nativescript-background-http": "4.2.1",
"nativescript-camera": "4.5.0",
"nativescript-fonticon": "^2.0.0",
"nativescript-http-formdata": "^2.1.0",
"nativescript-image": "3.0.1",
"nativescript-imagepicker": "7.1.0",
"nativescript-intl": "3.0.0",
"nativescript-iqkeyboardmanager": "1.5.1",
"nativescript-theme-core": "2.0.24",
"nativescript-ui-autocomplete": "7.0.2",
"nativescript-ui-calendar": "6.1.0",
"nativescript-ui-chart": "7.1.1",
"nativescript-ui-dataform": "7.0.4",
"nativescript-ui-gauge": "6.0.0",
"nativescript-ui-listview": "8.0.1",
"nativescript-ui-sidedrawer": "8.0.0",
"nativescript-vue": "2.8.3",
"terser-webpack-plugin": "^2.3.5",
"vform": "^1.0.1",
"vue-i18n": "^8.17.0",
"vuex": "^3.1.3"
}
app.js
new Vue({
store,
render: h => h('frame', [h(routes.login)]),
created() {
},
}).$start();
After after the successful Login, I will be redirected to Main.vue.
Main.vue contains following (Bottom Navigation and included component for main menu -> Home):
<template>
<Page actionBarHidden="true">
<ActionBar title="App-Name"></ActionBar>
<StackLayout>
<StackLayout>
<BottomNavigation height="auto">
<TabStrip>
<TabStripItem>
<Label text="Home"></Label>
<Image src="res://home"></Image>
</TabStripItem>
<TabStripItem>
<Label text="Einstellungen"></Label>
<Image src="res://settings"></Image>
</TabStripItem>
<TabStripItem>
<Label text="Info"></Label>
<Image src="res://browse"></Image>
</TabStripItem>
</TabStrip>
<TabContentItem>
<GridLayout>
<Home></Home>
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Settings></Settings>
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Info></Info>
</GridLayout>
</TabContentItem>
</BottomNavigation>
</StackLayout>
</StackLayout>
</Page>
</template>
The Home Component which contains the main menu, looks like that:
<template> </template>
and contains card which has a #tap function to go to the next page.
methods: {
logout() {
this.$store.dispatch("clearUser");
},
goToPageXY() {
this.$navigateTo(PageXY, {
clearHistory: false,
});
},
},
The page that is called via tap (PageXY in that case) contains this structure:
<template>
<Page class="page">
</Page>
</template>
The further navigation in 'deeper' pages works as expected and I can use the "Go back" button as I need to.
Problem:
Once I want to navigate back to the Main.vue (From PageXY back via history-mode ON or $navigateTo / $navigateBack) the App crashes. This only happens on that page.
The error output is following:
***** Fatal JavaScript exception - application has been terminated. *****
Native stack trace:
1 0x10de4b62e NativeScript::reportFatalErrorBeforeShutdown(JSC::ExecState*, JSC::Exception*, bool)
2 0x10de8c3a8 NativeScript::FFICallback<NativeScript::ObjCMethodCallback>::ffiClosureCallback(ffi_cif*, void*, void**, void*)
3 0x10e887c90 ffi_closure_unix64_inner
4 0x10e8886b2 ffi_closure_unix64
5 0x7fff23f47ce3 -[UIViewController __viewDidAppear:]
6 0x7fff23f47fbc -[UIViewController _endAppearanceTransition:]
7 0x7fff23e6d6a3 -[UINavigationController navigationTransitionView:didEndTransition:fromView:toView:]
8 0x7fff23e62284 __49-[UINavigationController _startCustomTransition:]_block_invoke
9 0x7fff23f6c4b8 -[_UIViewControllerTransitionContext completeTransition:]
10 0x7fff23f83680 __53-[_UINavigationParallaxTransition animateTransition:]_block_invoke.155
11 0x7fff24bcb250 -[UIViewAnimationBlockDelegate _didEndBlockAnimation:finished:context:]
12 0x7fff24b9bb62 -[UIViewAnimationState sendDelegateAnimationDidStop:finished:]
13 0x7fff24b9c101 -[UIViewAnimationState animationDidStop:finished:]
14 0x7fff24b9c285 -[UIViewAnimationState animationDidStop:finished:]
15 0x7fff27a8a4f6 CA::Layer::run_animation_callbacks(void*)
16 0x7fff20106508 _dispatch_client_callout
17 0x7fff20112ff7 _dispatch_main_queue_callback_4CF
18 0x7fff2038bdab __CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__
19 0x7fff2038662e __CFRunLoopRun
20 0x7fff203856c6 CFRunLoopRunSpecific
21 0x7fff2b76adb3 GSEventRunModal
22 0x7fff24675187 -[UIApplication _run]
23 0x7fff2467a038 UIApplicationMain
24 0x10e8884f5 ffi_call_unix64
25 0x115a85090
JavaScript stack trace:
file: node_modules/nativescript-vue/dist/index.js:4880:17
at destroy(file: node_modules/nativescript-vue/dist/index.js:4046:8)
at invokeDestroyHook(file: node_modules/nativescript-vue/dist/index.js:5455:60)
at patch(file: node_modules/nativescript-vue/dist/index.js:5808:47)
at file: node_modules/nativescript-vue/dist/index.js:4886:17
at handler(file: node_modules/nativescript-vue/dist/index.js:12773:12)
at _handleEvent(file: app/packages/core/data/observable/index.ts:296:19)
at notify(file: app/packages/core/data/observable/index.ts:278:27)
at onNavigatedFrom(file: app/packages/core/ui/page/page-common.ts:139:14)
at raiseCurrentPageNavigatedEvents(file: app/packages/core/ui/frame/frame-common.ts:310:24)
at _updateBackstack(file: app/packages/core/ui/frame/frame-common.ts:268:39)
at setCurrent(file: app/packages/core/ui/frame/index.ios.ts:58:25)
at file:///app/vendor.js:39242:23
at UIApplicationMain([native code])
at run(file: app/packages/core/application/index.ios.ts:395:20)
at file: node_modules/nativescript-vue/dist/index.js:12548:23
at file:///app/bundle.js:6582:10
at ./app.js(file:///app/bundle.js:6586:34)
at __webpack_require__(file: app/webpack/bootstrap:750:0)
at checkDeferredModules(file: app/webpack/bootstrap:43:0)
at webpackJsonpCallback(file: app/webpack/bootstrap:30:0)
at anonymous(file:///app/bundle.js:2:61)
at evaluate([native code])
at moduleEv<…>
JavaScript error:
file: node_modules/nativescript-vue/dist/index.js:4880:17: JS ERROR TypeError: undefined is not an object (evaluating 'vm._data.__ob__')
***** Fatal JavaScript exception - application has been terminated. *****
My feeling tells me, that I did mistakes when it comes to using Pages / Frames.
I would really appreciate any kind of help, since I'm struggling with that for hours already.
Thank you very much!
If you are using frame
try this
this.$navigateTo(PageXY, {
frame: 'frame',
});
to go back try this:
this.$navigateBack({frame: "frame"});
Animation works great on all desktop browsers as well as on iPhone 6 or 8 with iOS 12.
On iPhone XS with iOS 13.3 installed, periodic flickering is observed.
<style type="text/css">
#-webkit-keyframes anim_pet {
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); }
}
#keyframes anim_pet {
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); }
}
.anim_pet {
-webkit-animation: anim_pet 120s infinite linear;
animation: anim_pet 120s infinite linear;
}
</style>
<defs>
<symbol id="symbol_pet">
<path d="M0 0 L0.54 0.26 L0.79 1.29 L0.59 2.16 L-0.07 3.25 L-1.4 4.43 L-3.66 5.45 L-7.07 5.87 L-11.73 5.07 L-14.5 3.94 L-17.52 2.15 L-20.71 -0.43 L-23.96 -3.95 L-27.11 -8.57 L-29.97 -14.44 L-32.27 -21.69 L-33.7 -30.44 L-33.87 -40.75 L-32.32 -52.65 L-28.55 -66.09 L-21.95 -80.91 L-11.89 -96.83 L2.34 -113.45 L21.46 -130.14 L46.2 -146.11 L77.24 -160.3 L115.21 -171.39 L160.59 -177.78 L213.65 -177.54 L274.38 -168.44 L342.41 -147.92 L416.87 -113.12 L496.27 -60.93 "/>
</symbol>
</defs>
<radialGradient id = "gra1" cx = "0%" cy = "0%" r = "424px" gradientUnits="userSpaceOnUse">
<stop stop-color = "rgb(176,156,184)" offset = "0.2">
<animate restart="never" attributeName="offset" calcMode="spline" values="0.2; 0.8" keySplines="0.0 0.0 1.0 1.0" dur="8.0s" repeatCount="1" fill="freeze"/>
</stop>
</radialGradient>
<g id="flower" stroke="url(#gra1)">
<g>
<use class="anim_pet" xlink:href="#symbol_pet"/>
<g transform="scale(-1,1)">
<use class="anim_pet" xlink:href="#symbol_pet"/>
</g>
</g>
<g transform="rotate(-30)">
<use class="anim_pet" xlink:href="#symbol_pet"/>
<g transform="scale(-1,1)">
<use class="anim_pet" xlink:href="#symbol_pet"/>
</g>
</g>
...
<g transform="rotate(-330)">
<use class="anim_pet" xlink:href="#symbol_pet"/>
<g transform="scale(-1,1)">
<use class="anim_pet" xlink:href="#symbol_pet"/>
</g>
</g>
</g>
Also, if I remove the gradient and fill the path, the flicker disappears.
... <g id="flower" stroke="blue"> ...
As I see it, this is a bug in the operating system, because it is observed both in Chrome and in Safari.
Or maybe I'm wrong?
Why exactly in the very latest iphone does this absurdity appear?
This is not in any of the browsers since 2012 :) At least as much as I support.
I have JPG images and with inputsvgdraw, a flash tool for image annotation (http://www.mainada.net/inputdraw).
As Gimp or Picasa, when i crop an image and i save as new image only the cropped part. I need a function that take svg path (representing new image bourders) as parameter and then basing on that, create the new image.
svg data:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 488 325"><g fill="none" stroke-miterlimit="6" stroke-linecap="round" stroke-linejoin="round"><path d="M 307 97 l 0 -1 l -2 -1 l -10 -2 l -20 -1 l -25 5 l -22 9 l -10 9 l 0 9 l 2 12 l 16 18 l 25 11 l 25 5 l 17 -1 l 6 -4 l 3 -7 l -1 -12 l -6 -16 l -7 -13 l -11 -12 l -11 -14 l -9 -5" opacity="1" stroke="rgb(170,37,34)" stroke-width="5"/></g></svg>.
How can i extract and save in a new image inside circle part image? There is any library that handle this?
There is a way convert these datas for a function in a image library in python and cropping image?